@extends('Customer.customer-layout')


@section('body')

    @include('Customer.left-menu')

    <main id="main" class="main">
        <div class="pagetitle">
            <h1>Bill Pay</h1>
            <nav>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('customerDashboard') }}">Home</a></li>
                    <li class="breadcrumb-item active">Bill Pay</li>
                </ol>
            </nav>
        </div><!-- End Page Title -->
        <section class="section profile">
            <div class="row">

                <div class="col-xl-12">

                    <div class="card">
                        <div class="card-body pt-3">
                            <!-- Bordered Tabs -->

                            @if (Session::has('successMsg'))
                                <p class="alert alert-info">{{ Session::get('successMsg') }}</p>
                            @endif
                            @if (Session::has('error'))
                                <p class="alert alert-danger">{{ Session::get('error') }}</p>
                            @endif

                            <div class="tab-content pt-2">

                                <div class="tab-pane fade show active profile-overview" id="profile-overview">
                                    <h5 class="card-title">Profile Details</h5>

                                    @if (json_decode(siteinfo()->payment_url)->payment_url_enable == 'on')
                                        <h2>Pay now Using Different Url</h2>
                                        <a href="{{ json_decode(siteinfo()->payment_url)->payment_url }}" target="_blank"
                                            class="btn btn-danger mb-5" style="padding:10px 50px;">Pay Now</a>
                                    @endif

                                    <div class="row">
                                        <div class="col-lg-3 col-md-3 label">User ID</div>
                                        <div class="col-lg-3 col-md-3">{{ $details['userinfo']->id }}</div>
                                        <div class="col-lg-3 col-md-3 label">Username</div>
                                        <div class="col-lg-3 col-md-3">{{ $details['userinfo']->userid }}</div>
                                    </div>

                                    <div class="row">
                                        <div class="col-lg-3 col-md-3 label ">Full Name</div>
                                        <div class="col-lg-3 col-md-3">
                                            {{ $details['userinfo']->clientsinfo->clients_name }}</div>
                                        <div class="col-lg-3 col-md-3 label">STATUS</div>
                                        <div class="col-lg-3 col-md-3">
                                            @if ($details['userinfo']->clients_status == 'expired')
                                                <span
                                                    class="badge bg-danger">{{ $details['userinfo']->clients_status }}</span>
                                            @else
                                                <span
                                                    class="badge bg-success">{{ $details['userinfo']->clients_status }}</span>
                                            @endif
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-lg-3 col-md-3 label">PACKAGE NAME</div>
                                        <div class="col-lg-3 col-md-3">{{ $details['package']->package_name }}</div>
                                        <div class="col-lg-3 col-md-3 label">PACKAGE PRICE</div>
                                        @if (checkSettings('ResellerClientOnlineRecharge') == 'enable' && $details['userinfo']->pop->bill_generate == 'no')
                                            @if (checkSettings('setClientPaymentAmountToClient') == 'enable' && $details['userinfo']->client_payment_amount > 0)
                                                <div class="col-lg-3 col-md-3">
                                                    {{ $details['userinfo']->client_payment_amount }}</div>
                                            @else
                                                <div class="col-lg-3 col-md-3">
                                                    {{ $details['package']->client_payment_amount }}</div>
                                            @endif
                                        @else
                                            <div class="col-lg-3 col-md-3">{{ $details['package']->package_rate }}</div>
                                        @endif
                                    </div>

                                    <div class="row">
                                        <div class="col-lg-3 col-md-3 label">CURRENT BALANCE</div>
                                        <div class="col-lg-3 col-md-3">
                                            @if (checkSettings('ResellerClientOnlineRecharge') == 'enable' &&
                                                    $details['userinfo']->pop->bill_generate == 'no' &&
                                                    $details['userinfo']->un_recharge_amount > 0)
                                                {{ $details['userinfo']->un_recharge_amount }}
                                            @else
                                                @if (isset($details['account']->dueAmount) && $details['account']->dueAmount < 1)
                                                    {{ abs($details['account']->dueAmount) }}
                                                @else
                                                    0
                                                @endif
                                            @endif
                                        </div>
                                        @if ($details['userinfo']->pop->bill_generate != 'no')
                                            <div class="col-lg-3 col-md-3 label">Due Balance</div>
                                            <div class="col-lg-3 col-md-3">
                                                @if (isset($details['account']->dueAmount) && $details['account']->dueAmount > 0)
                                                    <span class="text-red-600 font-bold">
                                                        {{ abs($details['account']->dueAmount) }} </span>
                                                @else
                                                    0
                                                @endif
                                            </div>
                                        @endif
                                    </div>

                                    <div class="row">
                                        <div class="col-lg-3 col-md-3 label">EXPIRE DATE</div>
                                        <div class="col-lg-3 col-md-3">
                                            {{ date('d-M-Y', strtotime($details['userinfo']->expire_date)) }}</div>
                                        <div class="col-lg-2 col-md-2 label">Mobile</div>
                                        <div class="col-lg-4 col-md-4">
                                            <input type="text" name="customer_mobile" class="border px-4 py-1"
                                                id="mobile" placeholder="Mobile" readonly
                                                value="{{ $details['userinfo']->clientsinfo->contact_no }}" required>
                                        </div>
                                    </div>

                                    <div class="row d-none">
                                        <div class="col-lg-3 col-md-4 label ">Name</div>
                                        <div class="col-lg-9 col-md-8">
                                            <input type="text" name="customer_name" class="border px-3 py-1"
                                                id="customer_name" placeholder=""
                                                value="{{ $details['userinfo']->clientsinfo->clients_name }}"
                                                value="" required>
                                        </div>
                                    </div>

                                    <div class="row d-none">
                                        <div class="col-lg-3 col-md-4 label">Email</div>
                                        <div class="col-lg-9 col-md-8">
                                            <input type="email" name="customer_email" class="border px-4 py-1"
                                                id="email"
                                                value="{{ $details['userinfo']->clientsinfo->email ?? 'test@gmail.com' }}"
                                                placeholder="you@example.com" required>
                                        </div>
                                    </div>

                                    <div class="row d-none">
                                        <div class="col-lg-3 col-md-4 label">Address</div>
                                        <div class="col-lg-9 col-md-8">
                                            <input type="text" class="border px-4 py-1 " id="address" name="address1"
                                                placeholder="1234 Main St"
                                                value="{{ $details['userinfo']->clientsinfo->area }}" value=""
                                                required>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-lg-3 col-md-4 label">Payment Amount</div>
                                        <div class="col-lg-9 col-md-8">
                                            <input type="hidden" id="customer_id" name="customer_id" class=""
                                                value="{{ $details['userinfo']->id }}">

                                            @if (checkSettings('ResellerClientOnlineRecharge') == 'enable' && $details['userinfo']->pop->bill_generate == 'no')
                                                @if (checkSettings('setClientPaymentAmountToClient') == 'enable' && $details['userinfo']->client_payment_amount > 0)
                                                    <input type="number" min="0" name="amount" id="amount"
                                                        value="{{ $details['userinfo']->client_payment_amount }}"
                                                        class="border px-4 py-1" required readonly />
                                                @else
                                                    <input type="number" min="0" name="amount" id="amount"
                                                        value="{{ $details['package']->client_payment_amount }}"
                                                        class="border px-4 py-1" required readonly />
                                                @endif
                                            @else
                                                @if (getBillingType() === 'day_to_day')
                                                    @if (checkSettings('change_payment_amount_client_portal') == 'enable')
                                                        <input type="number" min="0" name="amount"
                                                            id="amount" value="{{ abs($bill_amount) }}"
                                                            class="border px-4 py-1" required {{ (checkSettings('change_payment_amount_client_portal') == 'enable' ? '' : 'readonly') }}/>
                                                    @else
                                                        <input type="hidden" min="0" value="{{ $bill_amount }}"
                                                            name="amount" id="amount" class="border px-4 py-1"
                                                            required {{ (checkSettings('change_payment_amount_client_portal') == 'enable' ? '' : 'readonly') }} /> {{ $bill_amount }}
                                                    @endif
                                                @else
                                                    @if (isset($details['account']->dueAmount) && $details['account']->dueAmount > 0)
                                                        <input type="number" min="0" name="amount"
                                                            id="amount"
                                                            value="{{ abs($details['account']->dueAmount) }}"
                                                            class="border px-4 py-1" required {{ (checkSettings('change_payment_amount_client_portal') == 'enable' ? '' : 'readonly') }}/>
                                                    @else
                                                        <input type="number" min="0" name="amount"
                                                            id="amount"
                                                            value="{{ $details['package']->package_rate - $details['userinfo']->parmanent_discount }}"
                                                            class="border px-4 py-1" required {{ (checkSettings('change_payment_amount_client_portal') == 'enable' ? '' : 'readonly') }}/>
                                                    @endif
                                                @endif
                                            @endif

                                        </div>
                                    </div>

                                    @php
                                        $payment_button = collect(siteinfo()->payment_button);
                                        $bkash_image_btn = $buttons->where('type', 'bkash_img')->first();
                                        $ssl_image_btn = $buttons->where('type', 'ssl_img')->first();
                                        $upay_image_btn = $buttons->where('type', 'upay_img')->first();
                                        $nagad_image_btn = $buttons->where('type', 'nagod_img')->first();
                                        $surjopay_image_btn = $buttons->where('type', 'surjopay_img')->first();
                                        $paystation_image_btn = $buttons->where('type', 'paystation_img')->first();
                                        $uddokta_image_btn = $buttons->where('type', 'uddokta_img')->first();
                                        $eps_image_btn = $buttons->where('type', 'eps_img')->first();

                                    @endphp

                                    <style>
                                        .gateway-grid {
                                            display: grid;
                                            grid-template-columns: repeat(2, minmax(0, 1fr));
                                            gap: 12px;
                                        }

                                        @media (min-width: 768px) {
                                            .gateway-grid {
                                                grid-template-columns: repeat(3, minmax(0, 1fr));
                                            }
                                        }

                                        .gateway-btn {
                                            width: 100%;
                                            display: flex;
                                            flex-direction: column;
                                            align-items: flex-start;
                                            justify-content: flex-start;
                                            gap: 8px;
                                            padding: 10px 10px;
                                            border: 1px solid rgba(0, 0, 0, 0.12);
                                            border-radius: 10px;
                                            background: #fff;
                                            transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
                                        }

                                        .gateway-btn:hover {
                                            transform: translateY(-1px);
                                            box-shadow: 0 10px 22px rgba(0, 0, 0, 0.10);
                                            border-color: rgba(13, 110, 253, 0.35);
                                        }

                                        .gateway-btn:active {
                                            transform: translateY(0);
                                        }

                                        .gateway-left {
                                            display: flex;
                                            flex-direction: column;
                                            align-items: flex-start;
                                            gap: 2px;
                                            min-width: 0;
                                            flex: 1 1 auto;
                                            width: 100%;
                                        }

                                        .gateway-title {
                                            font-weight: 700;
                                            font-size: 14px;
                                            color: #111827;
                                            line-height: 1.2;
                                            white-space: normal;
                                            overflow-wrap: anywhere;
                                            display: -webkit-box;
                                            -webkit-line-clamp: 2;
                                            -webkit-box-orient: vertical;
                                            overflow: hidden;
                                        }

                                        .gateway-logo {
                                            height: 46px;
                                            width: 100%;
                                            max-width: 160px;
                                            object-fit: contain;
                                            background: transparent;
                                            border: 0;
                                            border-radius: 0;
                                            padding: 0;
                                            flex: 0 0 auto;
                                            align-self: flex-end;
                                        }
                                    </style>

                                    <div class="row">
                                        <div class="col-lg-3 col-md-4 label">Pay Now</div>
                                        <div class="col-lg-9 col-md-8">
                                            <div class="gateway-grid">
                                                @if (checkSettings('ssl-commerz-show') == 'enable')
                                                    <button type="button" id="paySSL" class="gateway-btn">
                                                        <span class="gateway-left">
                                                            <span class="gateway-title">SSLCommerz</span>
                                                        </span>
                                                        <img class="gateway-logo"
                                                            src="@if (!empty($ssl_image_btn)) {{ asset('storage/company/' . $ssl_image_btn->value) }} @else visa.png @endif"
                                                            alt="SSLCommerz">
                                                    </button>

                                                    <button style="display: none"
                                                        class="hidden btn btn-primary btn-lg btn-block" id="sslczPayBtn"
                                                        token="if you have any token validation"
                                                        postdata="your javascript arrays or objects which requires in backend"
                                                        order="If you already have the transaction generated for current order"
                                                        endpoint="{{ url('/pay-via-ajax') }}"> Pay Now
                                                    </button>
                                                @endif

                                                @if (checkSettings('bkash-show') == 'enable')
                                                    @if (checkSettings('bkash-tokenized') == 'enable')
                                                        <button class="gateway-btn" type="button" id="bKash_payment">
                                                            <span class="gateway-left">
                                                                <span class="gateway-title">bKash</span>
                                                            </span>
                                                            <img class="gateway-logo"
                                                                src="@if (!empty($bkash_image_btn)) {{ asset('storage/company/' . $bkash_image_btn->value) }} @else https://www.bkash.com/sites/all/themes/bkash/logo.png @endif"
                                                                alt="bKash">
                                                        </button>
                                                    @endif

                                                    @if (checkSettings('bkash-checkout') == 'enable')
                                                        <button id="bKash_button" class="gateway-btn" type="button"
                                                            onclick="BkashPayment()">
                                                            <span class="gateway-left">
                                                                <span class="gateway-title">bKash Checkout</span>
                                                            </span>
                                                            <img class="gateway-logo"
                                                                src="@if (!empty($bkash_image_btn)) {{ asset('storage/company/' . $bkash_image_btn->value) }} @else https://www.bkash.com/sites/all/themes/bkash/logo.png @endif"
                                                                alt="bKash">
                                                        </button>
                                                    @endif
                                                @endif

                                                @if (checkSettings('uddokta-pay-show') == 'enable')
                                                    <button class="gateway-btn" type="button" id="uddokta_pay">
                                                        <span class="gateway-left">
                                                            <span class="gateway-title">UddoktaPay</span>
                                                        </span>
                                                        <img class="gateway-logo"
                                                            src="@if (!empty($uddokta_image_btn)) {{ asset('storage/company/' . $uddokta_image_btn->value) }} @else {{ asset('/') }}images/payment_getway/uddokta.png @endif"
                                                            alt="UddoktaPay">
                                                    </button>
                                                @endif

                                                @if (checkSettings('pay-with-eps') == 'enable')
                                                    <button class="gateway-btn" type="button" id="eps_pay">
                                                        <span class="gateway-left">
                                                            <span class="gateway-title">EPS Pay</span>
                                                        </span>
                                                        <img class="gateway-logo"
                                                            src="@if (!empty($eps_image_btn)) {{ asset('storage/company/' . $eps_image_btn->value) }} @else {{ asset('/') }}images/payment_getway/eps.png @endif"
                                                            alt="EPS Pay">
                                                    </button>
                                                @endif

                                                @if (checkSettings('upay-payment') == 'enable')
                                                    <button class="gateway-btn" type="button" id="upay_payment">
                                                        <span class="gateway-left">
                                                            <span class="gateway-title">Upay</span>
                                                        </span>
                                                        <img class="gateway-logo"
                                                            src="@if (!empty($upay_image_btn)) {{ asset('storage/company/' . $upay_image_btn->value) }} @else {{ asset('images/payment_getway/upay.png') }} @endif"
                                                            alt="Upay">
                                                    </button>
                                                @endif

                                                @if (checkSettings('nagad-checkout-client-payment') == 'enable')
                                                    <button class="gateway-btn" type="button" id="nagad_payment">
                                                        <span class="gateway-left">
                                                            <span class="gateway-title">Nagad</span>
                                                        </span>
                                                        <img class="gateway-logo"
                                                            src="@if (!empty($nagad_image_btn)) {{ asset('storage/company/' . $nagad_image_btn->value) }} @else {{ asset('images/payment_getway/nagad.png') }} @endif"
                                                            alt="Nagad">
                                                    </button>
                                                @endif

                                                @if (checkSettings('surjo-pay-show') == 'enable')
                                                    <button class="gateway-btn" type="button" id="surjo_payment">
                                                        <span class="gateway-left">
                                                            <span class="gateway-title">ShurjoPay</span>
                                                        </span>
                                                        <img class="gateway-logo"
                                                            src="@if (!empty($surjopay_image_btn)) {{ asset('storage/company/' . $surjopay_image_btn->value) }} @else {{ asset('images/payment_getway/shurjopay.png') }} @endif"
                                                            alt="SurjoPay">
                                                    </button>
                                                @endif

                                                @if (checkSettings('paystation-pay-show') == 'enable')
                                                @if (!empty(env('PAYSTATION_MERCHANT_ID')) && !empty(env('PAYSTATION_PASSWORD')))
                                                    <button class="gateway-btn" type="button" id="paystation_card">
                                                        <span class="gateway-left">
                                                            <span class="gateway-title">PayStation</span>
                                                        </span>
                                                        <img class="gateway-logo"
                                                            src="@if (!empty($paystation_image_btn)) {{ asset('storage/company/' . $paystation_image_btn->value) }} @else {{ asset('images/payment_getway/visa-master.png') }} @endif"
                                                            alt="PayStation">
                                                    </button>
                                                @endif
                                                @endif
                                            </div>

                                            @if (checkSettings('nagad_health_service') == 'enable')
                                                <br>
                                                <p>
                                                    <a href="https://milvikbd.com/milvik-health-product/?fbclid=IwQ0xDSwLygchleHRuA2FlbQIxMAABHia9sn_UcTZZpu6CmKgg8N-IzZzpo41kCoHkd89XAMbt5DjUrxuwZaHrQGPK_aem_KWA4F-z0R7E5RNqbb_J9Bw">
                                                        Health Benefit for Circle Users
                                                        <img src="https://milvikbd.com/wp-content/uploads/2024/05/Menu-Logo.svg" alt="Health Benefit"
                                                            style="height: 80px; width: 80px; border-radius: 5px; padding: 5px;">
                                                    </a>
                                                </p>

                                            @endif



                                            {{-- <form action="{{ route('uddoktapay.pay') }}" class="mt-4" method="POST">

                                                @csrf

                                                <input name="full_name" type="text" id="name" class="form-control mt-2" value="Code Ecstasy">

                                                <label for="email" class="mt-4"><b>Email:</b></label>
                                                <input name="email" type="email" id="email" class="form-control mt-2" value="email@example.com">

                                                <label for="name" class="mt-4"><b>Amount:</b></label>
                                                <input name="amount" type="number" id="name" class="form-control mt-2" value="50">

                                                <input type="Uddokta Pay" class="btn btn-primary mt-4">
                                            </form> --}}


                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-lg-3 col-md-4 label"></div>
                                        <div class="col-lg-9 col-md-8">


                                        </div>



                                    </div>
                                </div><!-- End Bordered Tabs -->

                            </div>
                        </div>

                        <div class="card-footer">
                            <button class="btn btn-primary"><a href="{{ route('customerDashboard') }}"
                                    class="text-light"><i class="fa fa-arrow-left"></i>
                                    Back</a></button>
                        </div>

                    </div>




                </div>
        </section>

    </main>
@endsection

@section('script')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
    </script>
    <link rel="stylesheet" href="{{ asset('/') }}css/toastr.min.css">
    <script src="{{ asset('/') }}js/toastr.min.js"></script>

    {!! Toastr::message() !!}

    @if (checkSettings('ssl-commerz-show') == 'enable')
        @include('Customer.sslcommerz-script')
    @endif

    @if (checkSettings('bkash-tokenized') == 'enable')
        @include('Customer.bkash-tokenized')
    @endif
    @if (checkSettings('bkash-checkout') == 'enable')
        @include('Customer.bkash-checkout')
    @endif
    @if (checkSettings('upay-payment') == 'enable')
        @include('Customer.upay-payment')
    @endif

    @if (checkSettings('nagad-checkout-client-payment') == 'enable')
        @include('Customer.nagad_checkout')
    @endif

    <script>
        // onclick uddokta_pay button send request to pay route
        $('#uddokta_pay').click(function() {

            if ($('#amount').val() == '') {
                toastr.error('Amount is required');
            } else if ($('#customer_name').val() == '') {
                toastr.error('Customer name is required');
            } else if ($('#mobile').val() == '') {
                toastr.error('Mobile number is required');
            } else {
                //submit for
                $.ajax({
                    url: "{{ route('uddoktapay.pay') }}",
                    type: "POST",
                    data: {
                        full_name: $('#customer_name').val(),
                        mobile: $('#mobile').val(),
                        email: $('#email').val(),
                        amount: $('#amount').val(),
                        customer_id: $('#customer_id').val()
                    },
                    success: function(data) {
                        if (data.status == 'success') {
                            window.location.href = data.payment_url;
                        } else {
                            toastr.error(data.message);
                        }
                        //
                    }
                });
            }


        });

        var obj = {};

        $('#eps_pay').on('click', function() {
            obj.cus_name = $('#customer_name').val();
            obj.cus_phone = $('#mobile').val();
            obj.cus_email = $('#email').val() == '' ? 'demo@example.com' : $('#email').val();
            obj.cus_addr1 = $('#address').val();
            obj.amount = $('#amount').val();
            obj.customer_id = $('#customer_id').val();

            // console.log('comes to eps here');

            if ($('#mobile').val() != '' && $('#amount').val() != '' && $('#amount').val() != '') {
                var token = '{{ csrf_token() }}';

                $.ajax({
                    url: "{{ route('eps-payment-token') }}",
                    type: 'GET',
                    data: obj,
                    headers: {
                        "X-CSRF-TOKEN": token
                    },
                    success: function(result) {
                        if (result.status == 'error') {
                            toastr.error(result.message);
                        } else {
                            window.location.href = result.RedirectURL;
                            // $(location).attr('href', result.message);
                        }
                        // console.log(result, 'response Result');
                    },
                    error: function(err) {
                        toastr.error(err.message);
                    }
                });
            } else {
                if ($('#mobile').val() == '') {
                    toastr.error('Mobile Number is required');
                }
                if ($('#amount').val() == '') {
                    toastr.error('Amount is required');
                }
            }
        });

        $('#paystation_card').on('click', function() {
            if ($('#amount').val() == '') {
                toastr.error('Amount is required');
                return;
            }

            $.ajax({
                url: "{{ route('paystation.initiate') }}",
                type: "POST",
                data: {
                    amount: $('#amount').val(),
                    customer_id: $('#customer_id').val()
                },
                headers: {
                    "X-CSRF-TOKEN": "{{ csrf_token() }}"
                },
                success: function(data) {
                    if (data.status === 'success' && data.payment_url) {
                        window.location.href = data.payment_url;
                    } else {
                        toastr.error(data.message || 'PayStation initiate failed');
                    }
                },
                error: function(xhr) {
                    toastr.error(xhr.responseJSON?.message || 'PayStation initiate failed');
                }
            });
        });
    </script>

    @include('Customer.surjopayscript')
@endsection
