@extends('layouts.main')

@section('title', 'M-Pesa Configuration - PosAI')

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">M-Pesa Configuration</h1>
        <p class="text-muted">Configure M-Pesa payment integration</p>
    </div>
    <div>
        <a href="{{ route('mpesa.transactions') }}" class="btn btn-outline-primary">
            <i class="bi bi-list-ul me-2"></i> Transactions
        </a>
    </div>
</div>

<div class="row">
    <div class="col-md-8">
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-key me-2"></i>API Credentials</h5>
            </div>
            <div class="card-body">
                <form action="{{ route('mpesa.store') }}" method="POST">
                    @csrf
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Consumer Key</label>
                            <input type="text" name="consumer_key" class="form-control" value="{{ $config->consumer_key }}" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Consumer Secret</label>
                            <input type="password" name="consumer_secret" class="form-control" value="{{ $config->consumer_secret }}" required>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Shortcode (Business Shortcode)</label>
                            <input type="text" name="shortcode" class="form-control" value="{{ $config->shortcode }}" required placeholder="e.g., 174379">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Passkey</label>
                            <input type="password" name="passkey" class="form-control" value="{{ $config->passkey }}" required>
                        </div>
                    </div>

                    <hr class="my-4">

                    <h5 class="mb-3"><i class="bi bi-link-45deg me-2"></i>Callback URLs</h5>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Callback URL</label>
                            <input type="url" name="callback_url" class="form-control" value="{{ $config->callback_url ?? route('mpesa.callback') }}" placeholder="{{ route('mpesa.callback') }}">
                            <small class="text-muted">For STK Push</small>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Confirmation URL</label>
                            <input type="url" name="confirmation_url" class="form-control" value="{{ $config->confirmation_url }}">
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Validation URL</label>
                        <input type="url" name="validation_url" class="form-control" value="{{ $config->validation_url }}">
                    </div>

                    <hr class="my-4">

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" name="is_production" id="is_production" {{ $config->is_production ? 'checked' : '' }}>
                                <label class="form-check-label" for="is_production">
                                    Production Mode
                                </label>
                            </div>
                            <small class="text-muted">Enable for live M-Pesa transactions</small>
                        </div>
                        <div class="col-md-6 mb-3">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" name="is_active" id="is_active" {{ $config->is_active ? 'checked' : '' }}>
                                <label class="form-check-label" for="is_active">
                                    Enable M-Pesa Payments
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" name="manual_recording" id="manual_recording" {{ $config->manual_recording ? 'checked' : '' }}>
                                <label class="form-check-label" for="manual_recording">
                                    Manual Recording Mode
                                </label>
                            </div>
                            <small class="text-muted">Record M-Pesa payments without sending STK push</small>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Notes</label>
                        <textarea name="notes" class="form-control" rows="2">{{ $config->notes }}</textarea>
                    </div>

                    <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-save me-2"></i>Save Configuration
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="col-md-4">
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-info-circle me-2"></i>Status</h5>
            </div>
            <div class="card-body">
                <div class="d-flex align-items-center mb-3">
                    <div class="me-3">
                        <span class="badge bg-{{ $config->is_active ? 'success' : 'secondary' }} p-2">
                            <i class="bi bi-{{ $config->is_active ? 'check-circle' : 'x-circle' }}"></i>
                        </span>
                    </div>
                    <div>
                        <strong>M-Pesa Integration</strong>
                        <p class="text-muted mb-0 small">{{ $config->is_active ? 'Active' : 'Inactive' }}</p>
                    </div>
                </div>
                <hr>
                <div class="d-flex align-items-center mb-3">
                    <div class="me-3">
                        <span class="badge bg-{{ $config->is_production ? 'danger' : 'warning' }} p-2">
                            <i class="bi bi-{{ $config->is_production ? 'lightning' : 'clock' }}"></i>
                        </span>
                    </div>
                    <div>
                        <strong>Environment</strong>
                        <p class="text-muted mb-0 small">{{ $config->is_production ? 'Production' : 'Sandbox' }}</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-question-circle me-2"></i>Help</h5>
            </div>
            <div class="card-body">
                <h6>How to Get Credentials</h6>
                <ol class="small text-muted" style="padding-left: 1rem;">
                    <li>Go to <a href="https://developer.safaricom.co.ke" target="_blank">Safaricom Developer Portal</a></li>
                    <li>Create an account or login</li>
                    <li>Create a new app</li>
                    <li>Get Consumer Key & Secret from app details</li>
                    <li>Use test shortcode for sandbox</li>
                </ol>

                <h6 class="mt-3">API Endpoints</h6>
                <ul class="small text-muted">
                    <li><strong>Sandbox:</strong> sandbox.safaricom.co.ke</li>
                    <li><strong>Production:</strong> api.safaricom.co.ke</li>
                </ul>

                <h6 class="mt-3">Test Numbers</h6>
                <ul class="small text-muted">
                    <li>Use: 254708374374</li>
                    <li>PIN: 0000</li>
                </ul>
            </div>
        </div>
    </div>
</div>
@endsection
