@extends('onboarding.layout')


@section('onBoarding_title')
    Onboarding
@endsection

@section('onBoarding_css')
    <style>
        #exampleModal11 {
            overflow-y: scroll;
        }

        .modal-footer {
            border: none;
        }
    </style>
@endsection

@section('onBoarding_content')
    <!-- main-content opened -->
    <div class="main-content horizontal-content mt-5" id="horizontal-content">
        <!-- container opened -->
        <div class="container mt-5 container-wdith">

            <div class="row">
                <div class="col-xl-12 col-lg-12 col-md-12 creator_margin">
                    <h5 class="text-center campaign_width">Welcome to the Site</h5>

                </div>

            </div>
            <div class="row continue">
                <div class="col-xl-2 col-lg-2 col-md-0 creator_margin"> </div>
                <div class="col-xl-8 col-lg-8 col-md-12 creator_margin">
                    <div class="card mt-88" style="border-radius:30px;box-shadow:none;">
                        <div class="card-body text-center">
                            <img src="{{ asset('/welcome_theme.png') }}" alt="" class="campaingn_image">
                            <h5 class="text-center mt-4 h5_width" style="color:#3C3C3C">Hello,
                                {{ ucwords($login_user->first_name) }} {{ ucwords($login_user->last_name) }}</h5>
                            <p class="p-font-size mb-5" style="color:#3C3C3C"> Please select one of the campaign
                                themes or have our Team design on your own
                            </p>
                            <button class="btn continue"
                                style="background-color: #29ABE2; border-radius: 10px; color:white;font-family: 'Inter';font-style: normal;"
                                href="javascript:;" data-bs-toggle="modal" data-bs-target="#exampleModal11">
                                Add a theme
                            </button>
                        </div>
                    </div>
                </div>
                <div class="col-xl-2 col-lg-2 col-md-0 creator_margin"> </div>
            </div>

            <div class="row assign_creator">
                <div class="col-xl-2 col-lg-2 col-md-0 creator_margin"> </div>
                <div class="col-xl-8 col-lg-8 col-md-12 creator_margin">
                    <div class="card" style="border-radius:30px;box-shadow:none;">
                        <div class="card-body text-center mt-2">
                            <img src="{{ asset('/welcome_theme_1.png') }}" alt="" class="campaingn_image">
                            <h5 class="text-center mt-4 h5_width" style="color:#3C3C3C">Hello,
                                {{ ucwords($login_user->first_name) }} {{ ucwords($login_user->last_name) }}</h5>
                            <p class="p-font-size" style="color:#3C3C3C"> When you are ready,<br>
                                select the get started button to be assigned a political content creator.
                            </p>
                            <p class="b-font-size  mb-5" style="font-size: 14px;"><b>
                                    You will be directed to the content creator section and will work one-on-one
                                    with
                                    our political message creators
                                </b></p>
                            <button class="btn get_started"
                                style="background-color: #29ABE2; border-radius: 10px; color:white;font-family: 'Inter';font-style: normal;">
                                <i class="fa fa-spinner fa-spin get_started_spin" style="display:none"></i> Get
                                started
                            </button>
                        </div>
                    </div>
                </div>
                <div class="col-xl-2 col-lg-2 col-md-0 creator_margin"> </div>
            </div>


        </div>
    </div>

    <div class="modal fade" id="exampleModal11" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">

                <div class="modal-body">

                    <div class="row">
                        <a href="javascript" data-bs-dismiss="modal" class="text-end modal-footer">X</a>