@extends('bootstrap.layouts.app')

@section('content')
    <div class="wrapper-content">
        <div class="wrapper-content__header">
        </div>
        <div class="wrapper-content__body">
            <!-- Main variables *content* -->
            <div id="block_83">
                <div class="block-bg"></div>
                <div class="container">
                    <div class="add-funds__form">
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="component_card">
                                    <div class="card">

                                        @if (isset($pageContent) &&
                                                !is_null($pageContent) &&
                                                ($pageContent->content_place == 'both' || $pageContent->content_place == 'top'))
                                            <div class="my-4 well">
                                                {!! $pageContent->page_content_top !!}
                                            </div>
                                        @endif
                                        <div class="card-body py-3">
                                            @if (session('success'))
                                                <div class="alert alert-success">
                                                    {{ session('success') }}
                                                </div>
                                            @endif
                                            @if (session('error'))
                                                <div class="alert alert-danger">
                                                    {{ session('error') }}
                                                </div>
                                            @endif
                                        </div>

                                        <form method="post" action="{{ route('addfunds.makePayment') }}"
                                            class="component_form_group kt-form" name="payment_form" id="profile_form"
                                            method="POST">
                                            @csrf
                                            @method('POST')
                                            <div class="">
                                                <div class="form-group">
                                                    <label for="method" class="control-label">Method</label>
                                                    <select class="form-control" id="payment_type" name="payment_type"
                                                        id="payment_type" onchange="fun_paytmqr();">
                                                        @foreach ($paymentsList as $payment)
                                                            <option data-id="{{ $payment->id }}" value="{{ $payment->method_name }}"
                                                                data-content="{{ $payment->method_name }}">
                                                                {{ $payment->method_name }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div class="form-group">
                                                    <label for="amount" class="control-label">Amount</label>
                                                    <input type="number" class="form-control" name="payment_amount"
                                                        id="amount" required>
                                                </div>
                                                <div id="showDetails">

                                                </div>
                                            </div>
                                            <div class="component_button_submit">
                                                <div class="">
                                                    <button type="submit"
                                                        class="btn btn-block btn-big-primary">Pay</button>
                                                </div>
                                            </div>
                                            @if (isset($pageContent) &&
                                                    !is_null($pageContent) &&
                                                    ($pageContent->content_place == 'both' || $pageContent->content_place == 'bottom'))
                                                <div class="mx-auto my-4 well">
                                                    {!! $pageContent->page_content_bottom !!}
                                                </div>
                                            @endif
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="block_101">
                <div class="block-bg"></div>
                <div class="container">
                    <div class="add-funds__list">
                        <div class="row mb-3">
                            <div class="col-lg-12">
                                <div class="table-bg component_table ">
                                    <div class="table-wr table-responsive">
                                        <table class="table">
                                            <thead>
                                                <tr>
                                                    <th>#</th>
                                                    <th>Date</th>
                                                    <th>Method</th>
                                                    <th>Amount</th>
                                                </tr>
                                            </thead>
                                            <tbody>

                                                @if (!empty($transactions))
                                                    @foreach ($transactions as $transaction)
                                                        <tr>
                                                            <td>{{ $transaction->payment_id }}</td>
                                                            <td>
                                                                <span
                                                                    class="nowrap">{{ $transaction->payment_create_date }}</span>
                                                            </td>
                                                            <td> <span class="nowrap">{{ $transaction->method_name }}</span>
                                                            </td>

                                                            <td>@php
                                                                $currentCurrency = current_currency();

                                                                if ($currentCurrency->currency_get != 'USD') {
                                                                    $transaction->payment_amount = round(
                                                                        $transaction->payment_amount *
                                                                            $currency_detail->currency_value,
                                                                        4,
                                                                    );
                                                                } else {
                                                                    $transaction->payment_amount = round(
                                                                        $transaction->payment_amount,
                                                                        4,
                                                                    );
                                                                }
                                                            @endphp
                                                                {{ $transaction->payment_amount }}</td>
                                                        </tr>
                                                    @endforeach
                                                @endif
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-5">
                                <nav class="component_pagination">
                                    <div class="">
                                    </div>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="wrapper-content__footer">
        </div>
    </div>
    </div>
    <!-- Notifications wrapper -->
    <div id="notify-wrapper" class="alert alert-success mb-3 hidden" style="display: none;"></div>


    <!--begin::Footer-->
    @include('layouts.footer')
    <!--end::Footer-->
@endsection
@section('script')
    <script>
        $(document).ready(function() {
            $('select#category').on('change', function() {
                getServiceByCategoryId(this.value);
            });

            $('select#neworder_services').on('change', function() {
                getServiceDetailsById(this.value);
            });
            getServiceByCategoryId($('select#category').val());
        });

        function getServiceByCategoryId(categoryId) {
            var data = new FormData();
            data.append('category_id', categoryId);
            $.ajax({
                type: 'POST',
                processData: false, // important
                contentType: false, // important
                data: data,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url: "{{ route('getServicesByCategory') }}",
                dataType: 'json',
                success: function(response) {
                    if (response?.services?.length) {
                        var html = "";
                        $.each(response?.services, function(index, value) {
                            html += '<option value="' + value?.service_id + '">' + value?.service_name +
                                '</option>'
                        });
                        $("#neworder_services").html(html);
                        getServiceDetailsById(response?.services[0]?.service_id);
                    }
                },
            });
        }

        function getServiceDetailsById(service_id) {
            var data = new FormData();
            data.append('service_id', service_id);
            $.ajax({
                type: 'POST',
                processData: false, // important
                contentType: false, // important
                data: data,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url: "{{ route('getServiceDetailsById') }}",
                dataType: 'json',
                success: function(response) {
                    var html = "";
                    if (response?.service_description != "") {
                        html += '<div class="col-lg-12">';
                        html += '<div class="py-3">';
                        html += '<label for="service_description" class="form-label">Description</label>';
                        html +=
                            '<input type="text" readonly name="service_description" id="service_description" class="form-control form-control-solid" placeholder="Description" value="' +
                            response?.service_description + '" />';
                        html += '</div>';
                        html += '</div>';
                    }

                    if (response?.service_package == 1 || response?.service_package == 2 || response
                        ?.service_package == 3 || response?.service_package == 4) {
                        var link_type = "Link";
                        if (response?.service_package == 2) {
                            link_type = "Username";
                        } else {
                            link_type = "Link";
                        }
                        html += '<div class="col-lg-12">';
                        html += '<div class="py-3">';
                        html += '<label for="field-orderform-fields-link" class="form-label">' + link_type +
                            '</label>';
                        html +=
                            '<input type="text" name="link" id="field-orderform-fields-link" class="form-control form-control-solid" placeholder="Link" value="" />';
                        html += '</div>';
                        html += '</div>';
                    }

                    if (response?.service_package == 1) {
                        html += '<div class="col-lg-12">';
                        html += '<div class="py-3">';
                        html +=
                            '<label for="field-orderform-fields-quantity" class="form-label">Quantity</label>';
                        html +=
                            '<input type="number" name="quantity" id="field-orderform-fields-quantity" class="form-control form-control-solid" placeholder="Quantity" value="" />';
                        html += '</div>';
                        html += '<small class="help-block min-max">Min: ' + response?.service_min + ' - Max: ' +
                            response?.service_max + '</small>';
                        html += '</div>';
                    }

                    if (response?.service_package == 11 || response?.service_package == 12 || response
                        ?.service_package == 13 || response?.service_package == 14 || response
                        ?.service_package == 15) {
                        html += '<div class="col-lg-12">';
                        html += '<div class="py-3">';
                        html += '<label for="field-orderform-fields-link" class="form-label">Username</label>';
                        html +=
                            '<input type="text" name="username" id="field-orderform-fields-link" class="form-control form-control-solid" placeholder="Username" value="" />';
                        html += '</div>';
                        html += '</div>';
                    }

                    if (response?.service_package == 3) {
                        html += '<div class="col-lg-12">';
                        html += '<div class="py-3">';
                        html +=
                            '<label for="field-orderform-fields-quantity" class="form-label">Quantity</label>';
                        html +=
                            '<input type="number" name="quantity" id="field-orderform-fields-quantity" class="form-control form-control-solid" placeholder="Quantity" value="" />';
                        html += '</div>';
                        html += '<small class="help-block min-max">Min: ' + response?.service_min + ' - Max: ' +
                            response?.service_max + '</small>';
                        html += '</div>';
                    }

                    if (response?.service_package == 11 || response?.service_package == 12 || response
                        ?.service_package == 13) {
                        html += '<div class="col-lg-12">';
                        html += '<div class="py-3">';
                        html +=
                            '<label for="field-orderform-fields-link" class="form-label">How many posts limit would you like?</label>';
                        html +=
                            '<input type="text" name="posts" id="field-orderform-fields-link" class="form-control form-control-solid" placeholder="How many posts limit would you like?" value="" />';
                        html += '</div>';
                        html += '</div>';

                        html += '<div class="col-lg-12">';
                        html += '<div class="form-group">';
                        html += '<label for="order_count" class="form-label">Quantity</label>';
                        html += '<div class="row">';
                        html += '<div class="col">';
                        html +=
                            '<input type="text" name="min" id="order_count_min" class="form-control form-control-solid" placeholder="Minimum" value="" />';
                        html += '</div>';
                        html += '<div class="col">';
                        html +=
                            '<input type="text" name="max" id="order_count_max" class="form-control form-control-solid" placeholder="Maximum" value="" />';
                        html += '</div>';
                        html += '</div>';
                        html += '</div>';
                        html += '<small class="help-block min-max">Min: ' + response?.service_min + ' - Max: ' +
                            response?.service_max + '</small>';
                        html += '</div>';
                        var session_delay = 0;
                        var selectedOption = "";
                        if (session_delay == 0) {
                            selectedOption = "selected";
                        } else if (session_delay == 300) {
                            selectedOption = "selected";
                        } else if (session_delay == 600) {
                            selectedOption = "selected";
                        } else if (session_delay == 900) {
                            selectedOption = "selected";
                        } else if (session_delay == 1800) {
                            selectedOption = "selected";
                        } else if (session_delay == 3600) {
                            selectedOption = "selected";
                        } else if (session_delay == 5400) {
                            selectedOption = "selected";
                        }

                        html += '<div class="col-lg-12">';
                        html += '<div class="py-3">';
                        html +=
                            '<label for="field-orderform-fields-delay" class="form-label">How long order delay do you want?</label>';
                        html +=
                            '<select name="delay" class="form-select form-select-solid" id="field-orderform-fields-delay">';
                        html += '<option value="0" ' + selectedOption + '>No delay</option>';
                        html += '<option value="300" ' + selectedOption + '>5 minutes</option>';
                        html += '<option value="600" ' + selectedOption + '>10 minutes</option>';
                        html += '<option value="900" ' + selectedOption + '>15 minutes</option>';
                        html += '<option value="1800" ' + selectedOption + '>30 minutes</option>';
                        html += '<option value="3600" ' + selectedOption + '>60 minutes</option>';
                        html += '<option value="5400" ' + selectedOption + '>90 minutes</option>';
                        html += '</select>';
                        html += '</div>';
                        html += '</div>';

                        html += '<div class="col-lg-12">';
                        html += '<div class="py-3">';
                        html +=
                            '<label for="field-orderform-fields-expiry" class="form-label">End Date</label>';
                        html +=
                            '<input type="text" name="expiry" id="field-orderform-fields-expiry" class="form-control form-control-solid datetime" placeholder="End Date" value="" autocomplete="off" />';
                        html += '</div>';
                        html += '</div>';
                    }

                    if (response?.service_dripfeed == 2) {
                        html += '<div class="col-lg-12">';
                        html += '<div class="py-3">';
                        html += '<label for="dripfeedcheckbox" class="form-label">';
                        html +=
                            '<input type="checkbox" name="check" id="dripfeedcheckbox" class="form-control form-control-solid" />';
                        html += 'Drip-feed Order</label>';
                        html += '</div>';
                        html += '</div>';

                        html += '<div class="col-lg-12">';
                        html += '<div class="py-3">';
                        html +=
                            '<label for="dripfeed-runs" class="form-label">How many times should the process be repeated?</label>';
                        html +=
                            '<input type="text" name="runs" id="dripfeed-runs" class="form-control form-control-solid" placeholder="How many times should the process be repeated?" value="" />';
                        html += '</div>';
                        html += '</div>';

                        html += '<div class="col-lg-12">';
                        html += '<div class="py-3">';
                        html +=
                            '<label for="dripfeed-interval" class="form-label">How many minutes interval? (60*24 = 1440 for daily shipping)</label>';
                        html +=
                            '<input type="text" name="interval" id="dripfeed-interval" class="form-control form-control-solid" placeholder="How many minutes interval? (60*24 = 1440 for daily shipping)" value="" />';
                        html += '</div>';
                        html += '</div>';

                        html += '<div class="col-lg-12">';
                        html += '<div class="py-3">';
                        html +=
                            '<label for="dripfeed-totalquantity" class="form-label">Total Quantity to be Sent</label>';
                        html +=
                            '<input type="text" name="total_quantity" id="dripfeed-totalquantity" class="form-control form-control-solid" placeholder="Total Quantity to be Sent" value="" />';
                        html += '</div>';
                        html += '</div>';
                    }

                    $("#dynamic-fields").html(html);
                },
            });
        }

        function fun_paytmqr() {
            var paymentType = document.getElementById("payment_type").value;
            if (paymentType == 'PayTM QR') {
                window.location.href = "{{ url('addfunds/paytm-qr-payment') }}";
                //alert(d);exit;
            }else{
                $.ajax({
                url: "{{url('/')}}/addfunds/get-details",
                data:{"id":paymentType},
                success: function(result) {
                    var notice = JSON.parse(result).notice;
                    $('#showDetails').html('<b>Notice: </b>'+notice);
                    
                }
            });
            }

        }
    </script>
@endsection