@extends('onboarding.layout')


@section('onBoarding_title')
    Payment
@endsection

@section('onBoarding_css')
    @include('partials.head')
    <link href="{{ asset('assets/css/onboarding.css') }}" rel="stylesheet">
    <style>
        .p-font-size {
            font-size: 12px;
        }

        .mt-14 {
            margin-top: -14px;
        }

        .btn-style {
            background-color: #19D56B;
            line-height: 0.538;
            border-radius: 5px;
            color: white;
            width: inherit;
        }

        .mt-37 {
            margin-top: 37px;
        }

        .back-submit-btn {
            background-color: #3EACE4;
            border-radius: 10px;
            color: white;
            width: 36%;
        }

        @media (min-width: 768px) {

            .main-header {
                z-index: 975 !important;
                width: 100% !important;
                left: 0;
                padding-left: 0px !important;
                position: fixed;
            }



        }

        .desktop-logo {
            height: 4rem;
            text-align: center;
            margin: 0 auto;
            justify-content: center;
        }

        .campaingn_image {
            width: 23%;
        }


        @media (min-width: 0px) and (max-width: 280px) {
            .back-submit-btn {
                background-color: #3EACE4;
                border-radius: 10px;
                color: white;
                width: inherit;
                margin-bottom: 13px;
            }

            .mt-37 {
                margin-top: 0px;
                margin-bottom: 16px;
            }

            .p-font-size {
                font-size: 8px;
            }


            .campaingn_image {
                width: 29%;
                height: 59%;
                object-fit: contain;
            }

            .campaign_website_content {
                padding-top: 0.5rem !important;
                margin-top: 1rem !important;
            }

            .campaign_speech_image {
                width: 55% !important;
            }

            .campaign_material {
                height: 146px !important;
                width: 115px !important;
                border-radius: 20px;
            }

            .campaign_material_margin {
                margin-top: 13px !important;
            }

            .card_width {
                height: 128px !important;
            }

            .h5_width {
                font-size: .6rem !important;
            }

            .container-margin {
                margin-top: 25% !important;
            }

            .campaign_width {

                text-align: center !important;
                font-family: inter;
                font-size: 1rem !important;
            }

            .email_campaign {
                padding-top: 0rem !important;
            }

            .card {
                box-shadow: none;
            }

            .container-wdith {
                width: 100% !important;
                margin-top: 25% !important;
            }



        }

        @media (min-width: 320px) and (max-width: 374px) {
            .p-font-size {
                font-size: 8px;
            }

            .back-submit-btn {
                background-color: #3EACE4;
                border-radius: 10px;
                color: white;
                width: inherit;
                margin-bottom: 13px;
            }

            .mt-37 {
                margin-top: 0px;
                margin-bottom: 16px;
            }

            .campaingn_image {
                width: 22%;
                height: 43%;
                object-fit: contain;
            }

            .campaign_website_content {
                padding-top: 0.5rem !important;
                margin-top: 1rem !important;
            }

            .campaign_speech_image {
                width: 55% !important;
            }

            .campaign_material {
                height: 161px !important;
                width: 160px !important;
                border-radius: 20px;
            }

            .campaign_material_margin {
                margin-top: 13px !important;
            }

            .card_width {
                height: 128px !important;
            }

            .h5_width {
                font-size: .7rem !important;
            }

            .container-margin {
                margin-top: 25% !important;
            }

            .campaign_width {

                text-align: center !important;
                font-size: 1.3rem !important;
            }

            .email_campaign {
                padding-top: 0rem !important;
            }

            .card {
                box-shadow: none;
            }

            .container-wdith {
                width: 100% !important;
                margin-top: 25% !important;
            }



        }

        @media (min-width: 375px) and (max-width: 424px) {
            .back-submit-btn {
                background-color: #3EACE4;
                border-radius: 10px;
                color: white;
                width: inherit;
                margin-bottom: 13px;
            }

            .mt-37 {
                margin-top: 0px;
                margin-bottom: 16px;
            }

            .p-font-size {
                font-size: 8px;
            }

            .campaingn_image {
                width: 20%;
                height: 63%;
                object-fit: contain;
            }

            .campaign_website_content {
                padding-top: 0.5rem !important;
                margin-top: 0.8rem !important;
            }


            .container-wdith {
                width: 100% !important;
                margin-top: 25% !important;
            }

            .campaign_width {

                text-align: center !important;
                font-size: 1.3rem !important;
            }

            .campaign_material {
                height: 161px !important;
                width: 160px !important;
                border-radius: 20px;
            }

            .campaign_material_margin {
                margin-top: 13px !important;
            }

            .card_width {
                height: 154px !important;
            }

            .h5_width {
                font-size: .7rem !important;
            }

            .container-margin {
                margin-top: 25% !important;
            }

            .email_campaign {
                padding-top: 0rem !important;
            }
        }

        @media (min-width: 425px) and (max-width:499px) {

            .campaingn_image {
                width: 70%;
            }

            .card-body {
                height: 168px;

            }

            .h5_width {
                font-size: .8rem;
            }
        }

        @media (min-width: 500px) and (max-width: 539px) {

            .campaingn_image {
                width: 70%;
            }

            .card_width {
                height: 168px !important;

            }

            .h5_width {
                font-size: .8rem !important;
            }

            .email_campaign {
                padding-top: 0rem !important;
            }

        }

        @media (min-width: 540px) and (max-width: 767px) {
            .back-submit-btn {
                background-color: #3EACE4;
                border-radius: 10px;
                color: white;
                width: inherit;
                margin-bottom: 13px;
            }

            .mt-37 {
                margin-top: 0px;
                margin-bottom: 16px;
            }

            .campaingn_image {
                width: 18%;
                height: 72%;
                object-fit: contain;
            }

            .campaign_material {
                height: 230px !important;
                width: 230px !important;
                border-radius: 20px;
            }

            .card_width {
                height: 150px !important;

            }

            .h5_width {
                font-size: .8rem !important;
            }

            .campaign_width {
                text-align: center !important;
            }

            .email_campaign {
                margin-top: -9px !important;
            }

            .container-wdith {
                width: 100% !important;
            }

            .campaign_website_content {
                padding-top: 0.5rem !important;
                margin-top: 1rem !important;
            }

        }

        @media (min-width: 768px) and (max-width: 991px) {
            .back-submit-btn {
                background-color: #3EACE4;
                border-radius: 10px;
                color: white;
                width: 50%;
            }

            .mt-75 {
                margin-top: -75px;
                ;
            }

            .mt-88 {
                margin-top: -88px;
            }

            .campaingn_image {
                width: 18%;
                height: 60%;
                object-fit: contain;
            }

            .campaign_width {
                font-size: 1.1rem !important;
            }

            .campaign_website_content {
                padding-top: 0.5rem !important;
                margin-top: 1rem !important;
            }

            .campaign_material {
                height: 220px !important;
                width: 220px !important;
                border-radius: 20px;
            }

            .h5_width {
                font-size: .9rem !important;
            }

            .campaign_width {

                text-align: center !important;
            }

            .card_width {
                height: 170px !important;

            }

            .creator_margin {
                margin-top: 3rem !important;
            }

            .email_campaign {
                padding-top: 0rem !important;
            }

            .container-wdith {
                width: 742px !important;
            }

        }

        @media (min-width: 991px) and (max-width: 1024px) {

            .card_wdith {
                height: 250px !important;
            }

            .campaign_width {
                font-size: 1rem !important;
            }

            .campaingn_image {
                width: 17%;
                height: 59%;
                object-fit: contain;
            }

            .h5_width {
                font-size: 1rem !important;
            }

            .campaign_width {
                font-size: 3rem;
            }

            .email_campaign {
                padding-top: 0rem !important;
            }

            .campaign_website_content {
                padding-top: 0.5rem !important;
                margin-top: 1.1rem !important;
            }
        }

        @media (min-width: 1025px) and (max-width: 1399.98px) {

            .campaingn_image {
                width: 13%;
                object-fit: contain;
            }

            .campaign_website_content {
                padding-top: 0.5rem !important;
                margin-top: 1rem !important;
            }

            .campaign_material_margin {
                margin-top: 16px !important;
            }

            .card_wdith {
                height: 200px !important;
            }

            .h5_width {
                font-size: 1rem !important;
            }

            .campaign_width {
                font-size: 1rem;
            }

            .email_campaign {
                padding-top: 0rem !important;
            }

        }

        .card:hover {
            border: 2px rgba(41, 171, 226, 1) solid;
            border-radius: 30px;
        }

        .campaign_material {
            height: 250px;
            width: 250px;
            border-radius: 20px;
        }

        .campaign_material_margin {

            margin-top: 53px;
        }

        .campaign_speech_image {
            width: 30%;
        }

        .campaign_width {
            font-size: 1.5rem;
        }

        .h5_width {
            font-size: .9rem;
        }

        .email_campaign {
            padding-top: 1.6rem;
        }

        .container-wdith {
            width: 867px;
        }

        .campaign_website_content {
            padding-top: 0.5rem;
            margin-top: 1.5rem;
        }

        .creator_margin {
            font-size: 1.2rem;
        }
    </style>
@endsection

@section('onBoarding_content')
<div class="page">

    <!-- main-content opened -->
    <div class="main-content horizontal-content mt-5" id="horizontal-content">
        <!-- container opened -->
        <div class="container mt-5 container-wdith">
            <form method="post" action="{{ route('updatelinks') }}">
                <div class="row">
                    <div class="col-xl-12 col-lg-12 col-md-12 creator_margin">
                        <h5 class="text-center campaign_width">For our content creators to learn more about the
                            candidate, please copy and
                            paste personal or campaign social media URL’s.</h5>

                    </div>

                </div>
                <div class="row">
                    <div class="col-xl-1 col-lg-1 col-md-0 creator_margin"> </div>
                    <div class="col-xl-10 col-lg-10 col-md-12 creator_margin">
                        <div class="card mt-88" style="border-radius:30px;box-shadow:none;">
                            <div class="card-body text-center">
                                <h5 class="d-none">If you select the <button class="btn" type="button"
                                        style="background-color: #19D56B;height: 29px;font-size: 10px;color: white;border-radius: 6px;"><i
                                            class="fa fa-plus"></i> Add</button> button for each social media
                                    platform,
                                    we will include the icons and links on your print and digital campaign material.
                                </h5>
                                <div class="row" id="add_fb_add">
                                    <div class="col-xl-1 col-lg-1">
                                    </div>
                                    <div class="col-xl-10 col-lg-10 col-md-10 form-group"
                                        style="text-align: initial;">
                                        <label class="text-muted" for="facebook"
                                            style="font-size: 12px;">Facebook (optional)</label>
                                        <input class="form-control input-social-media"
                                            style="background-color:#EDF1F3; border-radius:10px;" name="facebook"
                                            id="facebook" value="{{ Auth::user()->facebook }}"
                                            placeholder="www.facebook.com " />
                                        <small id="error-facebook" class="text-danger"
                                            style="display: none;font-size: 0.8rem;">* Please enter correct
                                            url</small>
                                    </div>
                                    <div class="col-xl-2 col-lg-2 col-md-2 mt-37 d-none">
                                        <button class="btn btn-style" type="button" id="add_fb"><i
                                                class="fa fa-plus"></i> Add</button>
                                    </div>
                                    <div class="col-xl-1 col-lg-1 col-md-1">
                                    </div>
                                </div>
                                <div class="row mt-14" id="add_twitter_add">
                                    <div class="col-xl-1 col-lg-1">
                                    </div>
                                    <div class="col-xl-10 col-lg-10 col-md-10 form-group"
                                        style="text-align: initial;">
                                        <label class="text-muted" for="twitter" style="font-size: 12px;">Twitter
                                            (optional)</label>
                                        <input class="form-control input-social-media"
                                            style="background-color:#EDF1F3; border-radius:10px;" name="twitter"
                                            id="twitter" value="{{ Auth::user()->twiiter }}"
                                            placeholder="www.twitter.com " />
                                        <small id="error-twitter" class="text-danger"
                                            style="display: none;font-size: 0.8rem;">* Please enter correct
                                            url</small>
                                    </div>
                                    <div class="col-xl-2 col-lg-2 col-md-2 mt-37 d-none">
                                        <button class="btn btn-style" type="button" id="add_twitter"><i
                                                class="fa fa-plus"></i> Add</button>
                                    </div>
                                    <div class="col-xl-1 col-lg-1 col-md-1">
                                    </div>
                                </div>
                                <div class="row mt-14" id="add_insta_add">
                                    <div class="col-xl-1 col-lg-1">
                                    </div>
                                    <div class="col-xl-10 col-lg-10 col-md-10 form-group"
                                        style="text-align: initial;">
                                        <label class="text-muted" for="facebook"
                                            style="font-size: 12px;">Instagram (optional)</label>
                                        <input class="form-control input-social-media"
                                            style="background-color:#EDF1F3; border-radius:10px;" name="instagram"
                                            id="instagram" value="{{ Auth::user()->instagram }}"
                                            placeholder="www.instagram.com " />
                                        <small id="error-instagram" class="text-danger"
                                            style="display: none;font-size: 0.8rem;">* Please enter correct
                                            url</small>
                                    </div>
                                    <div class="col-xl-2 col-lg-2 col-md-2 mt-37 d-none">
                                        <button class="btn btn-style" type="button" id="add_insta"><i
                                                class="fa fa-plus"></i> Add</button>
                                    </div>
                                    <div class="col-xl-1 col-lg-1 col-md-1">
                                    </div>
                                </div>
                                <div class="row mt-14" id="add_linkedin_add">
                                    <div class="col-xl-1 col-lg-1">
                                    </div>
                                    <div class="col-xl-10 col-lg-10 col-md-10 form-group"
                                        style="text-align: initial;">
                                        <label class="text-muted" for="facebook"
                                            style="font-size: 12px;">LinkedIn (optional)</label>
                                        <input class="form-control input-social-media"
                                            style="background-color:#EDF1F3; border-radius:10px;" name="linkedin"
                                            id="linkedin" value="{{ Auth::user()->linkedin }}"
                                            placeholder="www.linkedIn.com " />
                                        <small id="error-linkedin" class="text-danger"
                                            style="display: none;font-size: 0.8rem;">* Please enter correct
                                            url</small>
                                    </div>
                                    <div class="col-xl-2 col-lg-2 col-md-2 mt-37 d-none">
                                        <button class="btn btn-style" type="button" id="add_linkedin"><i
                                                class="fa fa-plus"></i> Add</button>
                                    </div>
                                    <div class="col-xl-1 col-lg-1 col-md-1">
                                    </div>
                                </div>
                                <div class="row mt-14" id="add_youtube_add">
                                    <div class="col-xl-1 col-lg-1">
                                    </div>
                                    <div class="col-xl-10 col-lg-10 col-md-10 form-group"
                                        style="text-align: initial;">
                                        <label class="text-muted" for="facebook" style="font-size: 12px;">YouTube
                                            (optional)</label>
                                        <input class="form-control input-social-media"
                                            style="background-color:#EDF1F3; border-radius:10px;" name="youtube"
                                            id="youtube" value="{{ Auth::user()->youtube }}"
                                            placeholder="www.YouTube.com " />
                                        <small id="error-youtube" class="text-danger"
                                            style="display: none;font-size: 0.8rem;">* Please enter correct
                                            url</small>
                                    </div>
                                    <div class="col-xl-2 col-lg-2 col-md-2 mt-37 d-none">
                                        <button class="btn btn-style" type="button" id="add_youtube"><i
                                                class="fa fa-plus"></i> Add</button>
                                    </div>
                                    <div class="col-xl-1 col-lg-1 col-md-1">
                                    </div>
                                </div>
                                <div class="row mt-14" id="add_bussiness_add">
                                    <div class="col-xl-1 col-lg-1">
                                    </div>
                                    <div class="col-xl-10 col-lg-10 col-md-10 form-group"
                                        style="text-align: initial;">
                                        <label class="text-muted" for="business_url"
                                            style="font-size: 12px;">Candidates Business URL (optional)</label>
                                        <input class="form-control input-social-media"
                                            style="background-color:#EDF1F3; border-radius:10px;"name="business_url"
                                            id="business_url" value="{{ Auth::user()->business_url }}"
                                            placeholder="www.optional.com " />
                                        <small id="error-business_url" class="text-danger"
                                            style="display: none;font-size: 0.8rem;">* Please enter correct
                                            url</small>
                                    </div>
                                    <div class="col-xl-2 col-lg-2 col-md-2 mt-37 d-none">
                                        <button class="btn btn-style" type="button" id="add_business"><i
                                                class="fa fa-plus"></i> Add</button>
                                    </div>
                                    <div class="col-xl-1 col-lg-1 col-md-1">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-1 col-md-0 creator_margin"> </div>
                </div>
                <div class="row mb-5 mt-75">
                    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 creator_margin">
                        <button class="btn float-end back-submit-btn">Go Back</button>
                    </div>
                    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 creator_margin">
                        <button class="btn back-submit-btn" id="btnSubmit" type="buttion"><i
                                class="fa fa-spin fa-spinner" style="display:none";></i> Submit</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <a href="#top" id="back-to-top"><i class="las la-angle-double-up"></i></a>

</div>
@endsection

@section('onBoarding_script')
@include('frontpartials.script')
<script src="https://cdn.safecharge.com/safecharge_resources/v1/websdk/safecharge.js"></script>
<script src="{{asset('assets/js/custom.js')}}"></script>
<script src="{{asset('assets/plugins/jquery.maskedinput/jquery.maskedinput.js')}}"></script>

<script>

    $('.card_detail').mask('99/99');
    $('.card_number').mask('9999-9999-9999-9999');
    $('.card_cvc').mask('999');

    $("#submit_form").on('submit', (function(e) {

        e.preventDefault();
        if(document.getElementById("package_id").value == "")
        {
            toastr.error("Please Select Package");
            return;
        }
        $.ajax({

            url: "/subscription/create",

            type: "post",

            data: new FormData(this),

            dataType: "JSON",

            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },

            processData: false,

            contentType: false,

            cache: false,

            beforeSend: function() {

                $("#btnSubmit").attr('disabled', true);

                $(".fa-spin").css('display', 'inline-block');

            },

            complete: function() {

                $("#btnSubmit").attr('disabled', false);

                $(".fa-spin").css('display', 'none');

            },

            success: function(response) {

                console.log(response)

                if (response["status"] == "fail") {

                    toastr.error('Failed', response["msg"])

                } else if (response["status"] == "success") {
                    toastr.success('Success', response["msg"]);
                    window.location.href = "/onboarding/payment/success"
                }

            },

            error: function(error) {

                console.log(error);

            }

        });

    }));

    // Additional code for adding placeholder in search box of select2
    let packageBtn = document.querySelectorAll(".package-btn")
    for(let i=0; i< packageBtn.length; i++)
    {
        packageBtn[i].addEventListener("click" , function(e){
            let activeBtn = document.querySelector(".active.package-btn")
            if(activeBtn)
            {
                activeBtn.classList.remove("active");
            }
            this.classList.add("active");
            setPackage(this)

        })
    }

    function setPackage(element)
    {
        let packageId = element.dataset.packageId;
        let packageType = element.dataset.packageType;
        let packagePrice = element.dataset.packagePrice;
        document.getElementById('total_amount').innerText = "$"+packagePrice;
        document.getElementById('duration').innerText = packageType;
        document.getElementById("selected-package").dataset.selectedPackage = packageId;
        document.getElementById('package_price').value = packagePrice;
        document.getElementById('package_type').value = packageType;
        document.getElementById("package_id").value = packageId;

    }

</script>
@endsection