@extends('user_dashboard.layouts.app')
@section('content')
    <section class="bg-color-white rbt-section-gap">
        <div class="container">
            <div class="row">
                <div class="col-lg-3">
                    @include('user_dashboard.layouts.sidebar')
                </div>
                <div class="col-lg-9 m-lg-auto">
                    <div class="rbt-contact-form contact-form-style-1 max-width-auto">
                        <div class="row align-items-center">
                            <div class="col-md-12">
                                <h4 class="gordita-bold text-center" style="border-bottom: 1px dashed rgba(34, 46, 72, .4);padding-bottom: 15px;">Please Pay Rs.
                                    {{ $upgrade_plan_error_log->amount }}/- On below given UPI
                                </h4>
                                <input type="hidden" value="{{websiteData('upi_id')}}" id="upi_id">
                                <h1 class="gordita-bold text-center">{{websiteData('upi_id')}} <a class="rbt-btn btn-gradient btn-sm" onclick="copyText()"><i class="fa fa-copy" style="font-size: 20px;"></i> Copy UPI</a></h1>
                                <h5 class="text-center mb-2">After Payment share screenshot and registered email id on given number.</h5>
                                @php
                                    $whts = App\Models\Admin\WebsiteSetting::where('type', 'whatsapp')->first();
                                @endphp
                                <h5 class="text-center mb-2"><a href="https://wa.me/+91{{optional($whts)->content}}" value="Send" class="btn btn-primary p-3 mt--10" style="font-size:16px; background:#25D366; border:0; font-weight:600;"><i class="fa fa-whatsapp"></i> Whatsapp: +91-{{optional($whts)->content}}</a></h5>
                                <div class="avatar-preview text-center">
                                    <img src="{{asset('frontend/images/qr_code/'.websiteData('qr_code'))}}" alt="" class="img-fluid">
                                    <p class="text-center" style="color: #372d7a;font-size:12px;font-weight:600;margin-top:5px;">Scan QR Code</p>
                                </div>
                                <h5 class="text-center mb-2">Payment Screenshot मैं सब Details Show होनी चाहिए। Like :- UTR/ UPI Ref. Id ( 12 digital number )</h5>
                            </div>
                            {{-- <div class="col-md-3">
                                <div class="avatar-preview">
                                    <img src="{{ asset('frontend/images/qr-code.jpg') }}" alt="" class="img-fluid">
                                    <p class="text-center" style="color: #372d7a;font-size:12px;font-weight:600;margin-top:5px;">Scan QR Code
                                    </p>
                                </div>
                            </div> --}}
                            <div class="col-lg-12 col-md-12">
                                <div class="login-wrapper">
                                    <div class="w-100">
                                        <div class="support-wrap">
                                            <form action="{{ route('user.qr.payment.detail', encrypt($upgrade_plan_error_log->id)) }}" method="POST" enctype="multipart/form-data">
                                                @csrf
                                                <div class="row">
                                                    <div class="col-md-9 form-group">
                                                        <small style="font-size: 16px;">Payment Screenshot</small>
                                                        <input type="file" name="payment_image" id="img_input1" accept="image/*">
                                                    </div>
                                                    <div class="col-md-3">
                                                        <div class="avatar-preview">
                                                            <img id="img1" src="{{ asset('backend/img/no-image.png') }}" alt="" class="img-fluid" width="100px">
                                                        </div>
                                                    </div>
                                                    @error('payment_image')
                                                            <span class="text-danger">{{ $message }}</span>
                                                        @enderror
                                                    <div class="col-md-12 form-group">
                                                        <label>UTR Number</label>
                                                        <input type="text" name="payment_id">
                                                        @error('payment_id')
                                                            <span class="text-danger">{{ $message }}</span>
                                                        @enderror
                                                    </div>
                                                    <div class="col-md-12">
                                                        <input type="submit" value="Send" class="rbt-btn btn-gradient square btn-sm">
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    @push('js')
        <script>
            img_input1.onchange = evt => {
                const [file] = img_input1.files
                if (file) {
                    img1.src = URL.createObjectURL(file)
                }
            }

            function copyText() {
                navigator.clipboard.writeText($('#upi_id').val());
                const Toast = Swal.mixin({
                    toast: true,
                    position: 'top-end',
                    showConfirmButton: false,
                    timer: 3000,
                    timerProgressBar: true,
                });
                Toast.fire({
                    icon: "success",
                    title: 'Referral Code Copied SuccessfullY!',
                });
            }
        </script>
    @endpush
@endsection