@extends('layouts.app')

@section('title', 'Integrations')

@section('content')
    <div class="mx-auto flex max-w-4xl flex-col gap-6">
        <div>
            <h1 class="text-lg font-semibold">System Integrations</h1>
            <p class="text-xs text-muted-foreground">Gateway keys and API settings for collections, SMS and banking services.</p>
        </div>

        <form method="post" action="{{ route('settings.integrations.save') }}" class="flex flex-col gap-6">
            @csrf

            <section class="rounded-xl border border-border bg-card p-4">
                <h2 class="text-xs font-semibold uppercase tracking-wide text-muted-foreground">M-Pesa</h2>
                <div class="mt-3 grid gap-3 md:grid-cols-2">
                    <x-field label="Paybill Number">
                        <x-input name="mpesa_paybill" value="{{ old('mpesa_paybill', $settings['mpesa_paybill'] ?? '') }}" />
                    </x-field>
                    <x-field label="Shortcode">
                        <x-input name="mpesa_shortcode" value="{{ old('mpesa_shortcode', $settings['mpesa_shortcode'] ?? '') }}" />
                    </x-field>
                    <x-field label="Consumer Key">
                        <x-input name="mpesa_consumer_key" value="{{ old('mpesa_consumer_key', $settings['mpesa_consumer_key'] ?? '') }}" />
                    </x-field>
                    <x-field label="Consumer Secret">
                        <x-input name="mpesa_consumer_secret" value="{{ old('mpesa_consumer_secret', $settings['mpesa_consumer_secret'] ?? '') }}" />
                    </x-field>
                    <x-field label="Passkey">
                        <x-input name="mpesa_passkey" value="{{ old('mpesa_passkey', $settings['mpesa_passkey'] ?? '') }}" />
                    </x-field>
                    <x-field label="Account No Primary Key">
                        <x-input name="mpesa_account_primary_key" value="{{ old('mpesa_account_primary_key', $settings['mpesa_account_primary_key'] ?? 'account_number') }}" />
                    </x-field>
                </div>
                <p class="mt-2 text-xs text-muted-foreground">When students pay school fees, the account number is used as the primary key for matching the fee payment to a student record.</p>
            </section>

            <section class="rounded-xl border border-border bg-card p-4">
                <h2 class="text-xs font-semibold uppercase tracking-wide text-muted-foreground">SMS</h2>
                <div class="mt-3 grid gap-3 md:grid-cols-2">
                    <x-field label="API URL">
                        <x-input name="sms_api_url" value="{{ old('sms_api_url', $settings['sms_api_url'] ?? '') }}" />
                    </x-field>
                    <x-field label="Sender ID">
                        <x-input name="sms_sender_id" value="{{ old('sms_sender_id', $settings['sms_sender_id'] ?? '') }}" />
                    </x-field>
                    <x-field label="Username">
                        <x-input name="sms_username" value="{{ old('sms_username', $settings['sms_username'] ?? '') }}" />
                    </x-field>
                    <x-field label="Password">
                        <x-input type="password" name="sms_password" value="{{ old('sms_password', $settings['sms_password'] ?? '') }}" />
                    </x-field>
                </div>
            </section>

            <section class="rounded-xl border border-border bg-card p-4">
                <h2 class="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Bank APIs</h2>
                <div class="mt-3 grid gap-3 md:grid-cols-3">
                    <x-field label="Co-op Bank">
                        <x-input name="bank_coop" value="{{ old('bank_coop', $settings['bank_coop'] ?? '') }}" />
                    </x-field>
                    <x-field label="Equity Bank">
                        <x-input name="bank_equity" value="{{ old('bank_equity', $settings['bank_equity'] ?? '') }}" />
                    </x-field>
                    <x-field label="KCB">
                        <x-input name="bank_kcb" value="{{ old('bank_kcb', $settings['bank_kcb'] ?? '') }}" />
                    </x-field>
                </div>
            </section>

            <div class="flex items-center justify-between">
                <button class="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90">Save Integration Settings</button>
            </div>
        </form>
    </div>
@endsection