@extends('layouts.landing')

@section('title', 'Payment Settings')
@section('content')
<div class="row">
    <div class="col-12 col-xxl-4 col-xl-4 col-lg-4">
        @include('elements.settings-menu')
    </div>
    <div class="col-12 col-xxl-8 col-xl-8 col-lg-8">
        <div class="card w-100 border-0 p-0 bg-white shadow-xss rounded-xxl">
            <div class="card-body p-4">
                <h5>Payment Settings</h5>
                <div class="row">
                    <div class="col-12">
                        <form class="pb-4" action="{{route('account.save-payment-setting', $user->creatorId())}}" method="POST">
                            @csrf
                            <div class="p-0">
                                <div class="card-header">
                                    <div class="d-flex justify-content-between">
                                        <h5>Paystack</h5>
                                        <small class="font-xss"><a href="https://dashboard.paystack.com" target="_blank">View documentation<i class="feather-arrow-up-right"></i></a></small>
                                    </div>
                                </div>
                                <div class="card-body p-4">
                                    <div class="row">
                                        {{-- <div class="col-12 col-lg-6 col-xl-6">
                                            <h5 class="mb-4">Test Keys</h5>
                                            <div class="form-group">
                                                <label class="form-label mb-2" id="hide-label">
                                                API Public Key
                                                </label>
                                                <input type="text" name="paystack_test_public_key" class="form-control" value="{{$payment_setting->paystack_test_public_key ?? ''}}">
                                            </div>
                                            <div class="form-group">
                                                <label class="form-label mb-2" id="hide-label">
                                                API Secret Key
                                                </label>
                                                <input type="text" name="paystack_test_secret_key" class="form-control" value="{{$payment_setting->paystack_test_secret_key ?? ''}}">
                                            </div>
                                        </div> --}}
                                        <div class="col-12 col-lg-12 col-xl-12">
                                            <h5 class="mb-4">Live Keys</h5>
                                            <div class="form-group">
                                                <label class="form-label mb-2" id="hide-label">
                                                API Public Key
                                                </label>
                                                <input type="text" name="paystack_live_public_key" class="form-control" value="{{$payment_setting->paystack_live_public_key ?? ''}}">
                                            </div>
                                            <div class="form-group">
                                                <label class="form-label mb-2" id="hide-label">
                                                API Secret Key
                                                </label>
                                                <input type="text" name="paystack_live_secret_key" class="form-control" value="{{$payment_setting->paystack_live_secret_key ?? ''}}">
                                            </div>
                                            <div class="form-group">
                                                <label class="form-label mb-2" id="hide-label">
                                                Sub Account
                                                </label>
                                                <input type="text" name="sub_account" class="form-control" value="{{$payment_setting->sub_account ?? ''}}">
                                            </div>

                                        </div>
                                    </div>
                                </div>
                                <div class="card-header">
                                    <div class="d-flex justify-content-between">
                                        <h5>Flutterwave</h5>
                                        <small class="font-xss"><a href="https://dashboard.flutterwave.com" target="_blank">View documentation<i class="feather-arrow-up-right"></i></a></small>
                                    </div>
                                </div>
                                <div class="card-body p-4">
                                    <div class="row">
                                        {{-- <div class="col-12 col-lg-6 col-xl-6">
                                            <h5 class="mb-4">Test Keys</h5>
                                            <div class="form-group">
                                                <label class="form-label mb-2" id="hide-label">
                                                    API Public Key
                                                </label>
                                                <input type="text" name="flutterwave_test_public_key" class="form-control" value="{{$payment_setting->flutterwave_test_public_key ?? ''}}">
                                            </div>
                                            <div class="form-group">
                                                <label class="form-label mb-2" id="hide-label">
                                                    API Secret Key
                                                </label>
                                                <input type="text" name="flutterwave_test_secret_key" class="form-control" value="{{$payment_setting->flutterwave_test_secret_key ?? ''}}">
                                            </div>
                                        </div> --}}
                                        <div class="col-12 col-lg-12 col-xl-12">
                                            <h5 class="mb-4">Live Keys</h5>
                                            <div class="form-group">
                                                <label class="form-label mb-2" id="hide-label">
                                                    API Public Key
                                                </label>
                                                <input type="text" name="flutterwave_live_public_key" class="form-control" value="{{$payment_setting->flutterwave_live_public_key ?? ''}}">
                                            </div>
                                            <div class="form-group">
                                                <label class="form-label mb-2" id="hide-label">
                                                    API Secret Key
                                                </label>
                                                <input type="text" name="flutterwave_live_secret_key" class="form-control" value="{{$payment_setting->flutterwave_live_secret_key ?? ''}}">
                                            </div>

                                        </div>
                                    </div>
                                </div>
                                <div class="card-header">
                                    <div class="d-flex justify-content-between">
                                        <h5>Tribearc Payment</h5>
                                        <small class="font-xss"><a href="https://payment.tribearc.com" target="_blank">View documentation<i class="feather-arrow-up-right"></i></a></small>
                                    </div>
                                </div>
                                <div class="card-body p-4">
                                    <div class="row">
                                        <div class="col-12 col-lg-6 col-xl-6">
                                            <h5 class="mb-4">Payment Key</h5>
                                            <div class="form-group">
                                                <label class="form-label mb-2" id="hide-label">
                                                    API Private Key
                                                </label>
                                                <input type="text" name="tribearc_private_key" class="form-control" value="{{$payment_setting->tribearc_private_key ?? ''}}">
                                            </div>
                                        </div>
                                        <div class="col-12 col-lg-6 col-xl-6">
                                            <h5 class="mb-4">Payment Method</h5>
                                            <div class="form-group">
                                                <label class="form-label mb-2" id="hide-label">
                                                    Select Active Payment Method
                                                </label>
                                                <select name="payment_method" class="form-select">
                                                    <option value="{{$payment_setting->payment_method ?? ''}}">{{$payment_setting->payment_method ?? 'Select Payment Method'}}</option>
                                                    <option value="paystack">Paystack</option>
                                                    <option value="flutterwave">Flutterwave</option>
                                                    <option value="tribearc">Tribearc</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="card-body px-4">
                                    <div class="mb-4 text-end">
                                        <input type="hidden" name="payment_setting_id" value="{{$payment_setting->id ?? ''}}">
                                        <button type="submit" class="btn custom-btn button_load" onclick="this.classList.toggle('button--loading')">
                                            <div class="button__text"><i class="mdi mdi-check"></i>  Save</div>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    function mailType(api, smtp, element) {
        document.getElementById(api).style.display = element.value == 'api' ? 'flex' : 'none';
        document.getElementById(smtp).style.display = element.value == 'smtp' ? 'initial' : 'none';
    }
</script>
@endsection