@extends('user_dashboard.layouts.app')
@section('content')
    @push('css')
        <style>
            .loader {
                z-index: 6000001;
                cursor: pointer;
            }

            .spinner-border {
                width: 2.5rem;
                height: 2.5rem;
                color: #fff;
            }

            .loader {
                position: fixed;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                background: #000;
                opacity: .3;
                z-index: 20000;
                align-items: center;
            }
        </style>
    @endpush

    <div class="d-flex justify-content-center loader d-none" id="loading_div">
        <div class="spinner-border" role="status">
            <span class="sr-only">Loading...</span>
        </div>
    </div>

    <div class="rbt-dashboard-area mt--30 mb--50">
        <div class="container-fluid">
            <div class="row g-5">
                <div class="col-lg-3">
                    @include('user_dashboard.layouts.sidebar')
                </div>

                <div class="col-lg-9">
                    <div class="rbt-dashboard-content bg-color-white rbt-shadow-box mb--10">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="section-title">
                                    <h3 class="rbt-title-style-style">Affiliate Links</h3>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4 mb-3">
                                <label for="referral" class="form-label">My Referral Link</label>
                                <input type="text" id="referral_link" value="{{ env('APP_URL') }}?referrer_code={{ Auth::guard('web')->user()->referrer_code }}" class="form-control" readonly>
                            </div>
                            <div class="col-md-2 mb-3">
                                <a class="mt-5 rbt-btn rbt-switch-btn btn-gradient radius-round btn-sm w-100 text-center" onclick="copyText()">Copy Link</a>
                            </div>
                            <div class="col-md-4 mb-3">
                                <label for="referral" class="form-label">My Referral Code</label>
                                <input type="text" id="referral_code" value="{{ Auth::guard('web')->user()->referrer_code }}" class="form-control" readonly>
                            </div>
                            <div class="col-md-2 mb-3">
                                <a class="mt-5 rbt-btn rbt-switch-btn btn-gradient radius-round btn-sm w-100 text-center" onclick="copyTextCode()">Copy Code</a>
                            </div>
                        </div>
                        <hr class="mt-3">
                        <div class="row">
                            <div class="col-md-3 mb-3">
                                <label for="links" class="form-label">Generate Link For</label>
                                <div class="rbt-modern-select bg-transparent height-45">
                                    <div class="dropdown bootstrap-select w-100">
                                        <select id="plan_id" onchange="get_plan_url()">
                                            @foreach (App\Models\Admin\Plan::where('status','1')->get() as $plan)
                                                <option value="{{ $plan->slug }}">{{ $plan->title }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-7 mb-3 mt-5">
                                <input type="text" id="links" class="form-control  mt-3_5" readonly>
                            </div>
                            <div class="col-md-2 mb-3">
                                <a class="mt-5 rbt-btn rbt-switch-btn btn-gradient radius-round btn-sm w-100 text-center" onclick="copyText1()">Copy Link</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

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

            function copyTextCode() {
                navigator.clipboard.writeText($('#referral_code').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!',
                });
            }

            $(get_plan_url());

            function get_plan_url() {
                var plan_id = $('#plan_id').val();

                plan_id = "{{ env('APP_URL') }}/checkout?slug=" + plan_id +
                    "&referrer_code={{ Auth::guard('web')->user()->referrer_code }}"
                $('#links').val(plan_id)
            }

            function copyText1() {
                navigator.clipboard.writeText($('#links').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