@extends('backend.template.layouts.template-base')

@section('title')
    Razorpay Settings | {{ config('app.name') }}
@endsection

@section('content')
<div class="row">
    <div class="col-lg-3">
        @include('backend.template.settings.sidebar')
    </div>
    <div class="col-lg-9">
        @if(session('message'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ session('message') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        <form id="razorpay-form" action="{{ route('backend.template.settings.update', 'razorpay') }}" method="POST">
            @csrf
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title mb-0">Razorpay Settings</h4>
                </div>
                <div class="card-body">
                    <div class="row gy-4">

                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Status</label>
                            <div class="d-flex gap-3">
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="razorpay_status" value="1" id="rp_status_active"
                                        @checked(($settings['razorpay_status'] ?? '0') == '1')>
                                    <label class="form-check-label text-success" for="rp_status_active">Active</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="razorpay_status" value="0" id="rp_status_inactive"
                                        @checked(($settings['razorpay_status'] ?? '0') == '0')>
                                    <label class="form-check-label text-danger" for="rp_status_inactive">Inactive</label>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Mode</label>
                            <div class="d-flex gap-3">
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="razorpay_mode" value="live" id="rp_mode_live"
                                        @checked(($settings['razorpay_mode'] ?? 'test') == 'live')>
                                    <label class="form-check-label text-success" for="rp_mode_live">Live Mode</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="razorpay_mode" value="test" id="rp_mode_test"
                                        @checked(($settings['razorpay_mode'] ?? 'test') == 'test')>
                                    <label class="form-check-label text-warning" for="rp_mode_test">Test Mode</label>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Test Key ID</label>
                            <input type="text" class="form-control" name="razorpay_test_key_id"
                                placeholder="rzp_test_xxxxxxxxxxxx"
                                value="{{ $settings['razorpay_test_key_id'] ?? '' }}">
                        </div>

                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Test Key Secret</label>
                            <input type="text" class="form-control" name="razorpay_test_key_secret"
                                placeholder="Test Key Secret"
                                value="{{ $settings['razorpay_test_key_secret'] ?? '' }}">
                        </div>

                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Live Key ID</label>
                            <input type="text" class="form-control" name="razorpay_live_key_id"
                                placeholder="rzp_live_xxxxxxxxxxxx"
                                value="{{ $settings['razorpay_live_key_id'] ?? '' }}">
                        </div>

                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Live Key Secret</label>
                            <input type="text" class="form-control" name="razorpay_live_key_secret"
                                placeholder="Live Key Secret"
                                value="{{ $settings['razorpay_live_key_secret'] ?? '' }}">
                        </div>

                    </div>

                    <div class="mt-4">
                        <button type="submit" class="btn btn-primary px-4">Save Settings</button>
                    </div>
                </div>
            </div>
        </form>

        {{-- API Reference card --}}
        <div class="card mt-3">
            <div class="card-header">
                <h5 class="card-title mb-0">Mobile API Reference</h5>
            </div>
            <div class="card-body">
                <p class="text-muted mb-2">Mobile app fetches credentials from:</p>
                <code>GET /api/settings/razorpay</code>
                <hr>
                <p class="text-muted mb-2">After Razorpay checkout succeeds, mobile sends payment ID to:</p>
                <code>POST /api/payments/razorpay</code>
                <pre class="bg-light p-3 rounded mt-2 mb-0">{
  "payment_reference_no": "pay_xxxxxxxxxxxx",
  "amount": 299.00,
  "payment_type": "order",
  "resource_id": 123   <span class="text-muted">// optional – order ID</span>
}</pre>
                <hr>
                <p class="text-muted mb-2">Check raw payment status:</p>
                <code>GET /api/payments/razorpay/{pay_xxxx}/status</code>
            </div>
        </div>
    </div>
</div>
@endsection