@extends('home.layouts.master')
@section('css')
    <style>
        .pl-0 {
            padding: 0;
        }
        body{
            direction: rtl;
        }
    </style>
@endsection
@section('main')
    <div class="container">
        <div class="row p-4">
            <div class="col-md-5 mx-auto p-0">
                <div class="card">
                    <div class="card-header bg-success text-center text-bold-900">
                        <div class="card-title">
                            <span class="card-title">{{Setting::get('title')}}</span>
                            <br>
                            <span class="">#{{$orderId}}</span>
                        </div>
                    </div>
                    <div class="card-body" id="state4" style="">
                        <div class="content">
                            <div class="invoice-content tab-border">
                                <div class="tab-pane active">
                                    <div class="invoice-content">
                                        <div class="col-md-12 mb-4">
                                            <div class="form-group">
                                                <label for="currency">{{trans('select payment method')}}</label>
                                                <select id="method" class="form-control" required>
                                                    <option value="usdt">{{trans('usdt')}}</option>
                                                    <option value="pm">{{trans('pm')}}</option>
                                                    <option value="pmv">{{trans('pmv')}}</option>
                                                </select>
                                            </div>
                                            <div class="form-group">
                                                <label for="currency">{{trans('amount')}}</label>
                                                <input type="text" id="amount" value="{{$amount}}" class="form-control"
                                                       readonly>
                                            </div>
                                            <div class="form-group">
                                                <button onclick="submit()"
                                                        class="btn btn-success">{{trans('submit')}}</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('js')
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        function submit() {
            var apiToken = `{{$apiToken}}`

            axios.post(`/api/payment/create?api_token=${apiToken}`, {
                'amount': `{{$amount}}`,
                'callbackUrl': `{{$callback}}`,
                'orderId': `{{$orderId}}`,
                'method': $('#method option:selected').val()
            })
                .then(function (response) {
                    console.log(response)
                    if (response.data.code === 1) {
                        if ($('#method option:selected').val() == 'irt') {
                            location.href = response.data.data
                        } else {
                            var token = response.data.data.token
                            location.href = `/api/payment/redirect/${token}?api_token=${apiToken}`
                        }
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });
        }
    </script>
@endsection