@extends('layouts.app')

@section('content')
<style>
    .mpesa-wrap { max-width: 1180px; }
    .mpesa-head { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:18px; }
    .mpesa-title { font-size:24px; font-weight:800; color:#111827; }
    .mpesa-card { background:#fff; border-radius:12px; padding:22px; box-shadow:0 8px 22px rgba(15,23,42,.06); margin-bottom:16px; }
    .mpesa-section-title { font-size:17px; font-weight:800; margin-bottom:5px; color:#111827; }
    .mpesa-muted { color:#64748b; font-size:13px; line-height:1.5; margin-bottom:16px; }
    .mpesa-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; }
    .mpesa-field { display:flex; flex-direction:column; gap:6px; }
    .mpesa-field.full { grid-column:1 / -1; }
    .mpesa-field label { font-weight:700; font-size:13px; color:#334155; }
    .mpesa-field input, .mpesa-field select {
        border:1px solid #d7dee8;
        border-radius:8px;
        padding:11px 12px;
        font-size:14px;
        background:#fff;
    }
    .mpesa-field input:focus, .mpesa-field select:focus { outline:2px solid rgba(232,76,13,.16); border-color:#E84C0D; }
    .mpesa-required { color:#E84C0D; }
    .mpesa-env { display:flex; gap:10px; flex-wrap:wrap; }
    .mpesa-option {
        flex:1;
        min-width:180px;
        border:1px solid #d7dee8;
        border-radius:10px;
        padding:12px;
        cursor:pointer;
    }
    .mpesa-option input { margin-right:8px; }
    .mpesa-option strong { display:block; margin-bottom:4px; }
    .mpesa-feature-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; }
    .mpesa-feature { border:1px solid #d7dee8; border-radius:10px; padding:14px; }
    .mpesa-feature-top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
    .mpesa-feature-title { font-weight:800; color:#111827; }
    .mpesa-toggle { display:flex; gap:6px; }
    .mpesa-toggle label {
        border:1px solid #d7dee8;
        border-radius:999px;
        padding:6px 10px;
        font-size:12px;
        cursor:pointer;
    }
    .mpesa-toggle input { display:none; }
    .mpesa-toggle input:checked + span { color:#E84C0D; font-weight:800; }
    .mpesa-copy-row { display:grid; grid-template-columns:1fr auto; gap:8px; align-items:end; }
    .mpesa-copy-btn, .mpesa-save, .mpesa-back {
        border:0;
        border-radius:8px;
        font-weight:800;
        cursor:pointer;
        text-decoration:none;
        display:inline-flex;
        align-items:center;
        justify-content:center;
    }
    .mpesa-copy-btn { padding:11px 13px; background:#f1f5f9; color:#111827; }
    .mpesa-save { padding:12px 18px; background:#E84C0D; color:#fff; }
    .mpesa-back { padding:10px 14px; background:#0f172a; color:#fff; }
    .mpesa-status { font-size:12px; color:#16a34a; font-weight:700; }
    .mpesa-warning { background:#fff7ed; color:#9a3412; border-radius:10px; padding:12px 14px; font-size:13px; margin-top:14px; }
    .mpesa-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }
    @media (max-width: 860px) {
        .mpesa-grid, .mpesa-feature-grid { grid-template-columns:1fr; }
        .mpesa-copy-row { grid-template-columns:1fr; }
    }
</style>

@php
    $value = fn ($key, $default = '') => old($key, $settings[$key] ?? $default);
@endphp

<div class="page-wrap mpesa-wrap">
    <div class="mpesa-head">
        <div>
            <div class="mpesa-title">M-Pesa Settings</div>
            <div class="mpesa-muted">Set up Safaricom Daraja credentials and callbacks for STK Push, C2B and B2C.</div>
        </div>
        <a class="mpesa-back" href="{{ url('/settings') }}">Back</a>
    </div>

    @if(session('success'))
        <div class="alert-success">{{ session('success') }}</div>
    @endif

    @if($errors->any())
        <div class="alert-error">
            @foreach($errors->all() as $error)
                <div>{{ $error }}</div>
            @endforeach
        </div>
    @endif

    <form method="POST" action="{{ url('/mpesa-settings') }}">
        @csrf

        <div class="mpesa-card">
            <div class="mpesa-section-title">Environment</div>
            <div class="mpesa-muted">Sandbox is for testing. Production is used once you are ready to accept real payments.</div>
            <div class="mpesa-env">
                <label class="mpesa-option">
                    <input type="radio" name="mpesa_environment" value="sandbox" {{ $value('mpesa_environment', 'sandbox') === 'sandbox' ? 'checked' : '' }}>
                    <strong>Sandbox</strong>
                    <span class="mpesa-muted">Transactions are simulated; no real money moves.</span>
                </label>
                <label class="mpesa-option">
                    <input type="radio" name="mpesa_environment" value="production" {{ $value('mpesa_environment') === 'production' ? 'checked' : '' }}>
                    <strong>Production</strong>
                    <span class="mpesa-muted">Use live Daraja credentials and live customer payments.</span>
                </label>
            </div>
        </div>

        <div class="mpesa-card">
            <div class="mpesa-section-title">API Credentials</div>
            <div class="mpesa-muted">Get these from Safaricom Daraja portal, My Apps, then your app. Sensitive credentials are encrypted and not shown again after saving.</div>
            <div class="mpesa-grid">
                <div class="mpesa-field">
                    <label>Consumer Key <span class="mpesa-required">*</span> @if($hasSecrets['mpesa_consumer_key']) <span class="mpesa-status">saved</span> @endif</label>
                    <input type="password" name="mpesa_consumer_key" placeholder="{{ $hasSecrets['mpesa_consumer_key'] ? 'Leave blank to keep saved key' : 'Enter consumer key' }}">
                </div>
                <div class="mpesa-field">
                    <label>Consumer Secret <span class="mpesa-required">*</span> @if($hasSecrets['mpesa_consumer_secret']) <span class="mpesa-status">saved</span> @endif</label>
                    <input type="password" name="mpesa_consumer_secret" placeholder="{{ $hasSecrets['mpesa_consumer_secret'] ? 'Leave blank to keep saved secret' : 'Enter consumer secret' }}">
                </div>
                <div class="mpesa-field">
                    <label>Shortcode / Paybill <span class="mpesa-required">*</span></label>
                    <input type="text" name="mpesa_shortcode" value="{{ $value('mpesa_shortcode') }}" required placeholder="Paybill or Till number">
                </div>
                <div class="mpesa-field">
                    <label>Shortcode Type <span class="mpesa-required">*</span></label>
                    <select name="mpesa_shortcode_type" required>
                        <option value="paybill" {{ $value('mpesa_shortcode_type', 'paybill') === 'paybill' ? 'selected' : '' }}>Paybill</option>
                        <option value="till" {{ $value('mpesa_shortcode_type', 'paybill') === 'till' ? 'selected' : '' }}>Till / Buy Goods</option>
                    </select>
                </div>
                <div class="mpesa-field">
                    <label>Account Reference <span class="mpesa-muted">(optional, max 12 chars)</span></label>
                    <input type="text" name="mpesa_account_reference" maxlength="12" value="{{ $value('mpesa_account_reference') }}" placeholder="Shown on STK prompt">
                </div>
                <div class="mpesa-field full">
                    <label>Passkey <span class="mpesa-required">*</span> @if($hasSecrets['mpesa_passkey']) <span class="mpesa-status">saved</span> @endif</label>
                    <input type="password" name="mpesa_passkey" placeholder="{{ $hasSecrets['mpesa_passkey'] ? 'Leave blank to keep saved passkey' : 'Enter Daraja passkey' }}">
                </div>
            </div>
        </div>

        <div class="mpesa-card">
            <div class="mpesa-section-title">Callback URLs</div>
            <div class="mpesa-muted">Register these in Daraja portal under your app. They must be HTTPS and publicly reachable; localhost will need a tunnel like ngrok.</div>
            <div class="mpesa-grid">
                @foreach([
                    'mpesa_stk_callback_url' => 'STK Push Callback URL',
                    'mpesa_c2b_validation_url' => 'C2B Validation URL',
                    'mpesa_c2b_confirmation_url' => 'C2B Confirmation URL',
                    'mpesa_b2c_result_url' => 'B2C Result URL',
                    'mpesa_b2c_timeout_url' => 'B2C Queue Timeout URL',
                ] as $key => $label)
                    <div class="mpesa-field full">
                        <label>{{ $label }}</label>
                        <div class="mpesa-copy-row">
                            <input id="{{ $key }}" type="url" name="{{ $key }}" value="{{ $value($key) }}">
                            <button type="button" class="mpesa-copy-btn" data-copy="{{ $key }}">Copy</button>
                        </div>
                    </div>
                @endforeach
            </div>
            <div class="mpesa-warning">Use production callback URLs only after deploying the system or exposing your local server through a secure tunnel.</div>
        </div>

        <div class="mpesa-card">
            <div class="mpesa-section-title">Features</div>
            <div class="mpesa-muted">Enable the M-Pesa flows this client will use.</div>
            <div class="mpesa-feature-grid">
                @foreach([
                    'mpesa_stk_enabled' => ['STK Push', "Prompts the customer's phone to pay with PIN"],
                    'mpesa_c2b_enabled' => ['C2B (Paybill / Till)', 'Customers pay directly into your Paybill or Till'],
                    'mpesa_b2c_enabled' => ['B2C (Disbursements)', 'Send refunds or payouts to customers'],
                    'mpesa_modem_enabled' => ['Modem SMS', 'Receive Till or Paybill confirmations through SMS Enabler'],
                ] as $key => [$title, $desc])
                    <div class="mpesa-feature">
                        <div class="mpesa-feature-top">
                            <div class="mpesa-feature-title">{{ $title }}</div>
                            <div class="mpesa-toggle">
                                <label>
                                    <input type="radio" name="{{ $key }}" value="yes" {{ $value($key, $key === 'mpesa_stk_enabled' ? 'yes' : 'no') === 'yes' ? 'checked' : '' }}>
                                    <span>Yes</span>
                                </label>
                                <label>
                                    <input type="radio" name="{{ $key }}" value="no" {{ $value($key, $key === 'mpesa_stk_enabled' ? 'yes' : 'no') === 'no' ? 'checked' : '' }}>
                                    <span>No</span>
                                </label>
                            </div>
                        </div>
                        <div class="mpesa-muted">{{ $desc }}</div>
                    </div>
                @endforeach
            </div>
        </div>

        <div class="mpesa-card">
            <div class="mpesa-section-title">Modem / SMS Enabler</div>
            <div class="mpesa-muted">This works alongside the online Daraja integration. Configure SMS Enabler to forward incoming messages to the local URL below.</div>
            <div class="mpesa-grid">
                <div class="mpesa-field">
                    <label>Modem Branch</label>
                    <select name="mpesa_modem_branch_id">
                        <option value="">Select branch</option>
                        @foreach($branches as $branch)
                            <option value="{{ $branch->id }}" {{ (string) $value('mpesa_modem_branch_id') === (string) $branch->id ? 'selected' : '' }}>{{ $branch->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="mpesa-field">
                    <label>Payment SMS Sender</label>
                    <input type="text" name="mpesa_modem_sender" value="{{ $value('mpesa_modem_sender', 'M-PESA') }}" placeholder="M-PESA">
                </div>
                <div class="mpesa-field full">
                    <label>SMS Enabler Incoming URL</label>
                    <div class="mpesa-copy-row">
                        <input id="mpesa_modem_incoming_url" type="text" value="{{ $value('mpesa_modem_incoming_url') }}" readonly>
                        <button type="button" class="mpesa-copy-btn" data-copy="mpesa_modem_incoming_url">Copy</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="mpesa-actions">
            <button class="mpesa-save">Save M-Pesa Settings</button>
        </div>
    </form>
</div>

<script>
document.querySelectorAll('[data-copy]').forEach(function (button) {
    button.addEventListener('click', function () {
        var target = document.getElementById(button.dataset.copy);
        if (!target) return;
        target.select();
        target.setSelectionRange(0, 99999);
        navigator.clipboard && navigator.clipboard.writeText
            ? navigator.clipboard.writeText(target.value)
            : document.execCommand('copy');
        button.textContent = 'Copied';
        setTimeout(function () { button.textContent = 'Copy'; }, 1000);
    });
});
</script>
@endsection