@extends('user.layout.header_footer_sidebar')

@section('content')
    <div id="content-wrapper" class="d-flex flex-column">
        <div id="content">
            <nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
                <button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
                    <i class="fa fa-bars"></i>
                </button>

                <form class="d-none d-sm-inline-block form-inline mr-auto ml-md-3 my-2 my-md-0 mw-100 navbar-search">
                    <!-- <div class="input-group">
              <input
                type="text"
                class="form-control bg-light border-0 small"
                placeholder="Search for..."
                aria-label="Search"
                aria-describedby="basic-addon2"
              />
              <div class="input-group-append">
                <button class="btn btn-primary" type="button">
                  <i class="fas fa-search fa-sm"></i>
                </button>
              </div>
            </div> -->
                </form>

                <!-- Topbar Navbar -->
                <ul class="navbar-nav ml-auto">
                    <!-- Nav Item - Search Dropdown (Visible Only XS) -->
                    <li class="nav-item dropdown no-arrow d-sm-none">
                        <a class="nav-link dropdown-toggle" href="#" id="searchDropdown" role="button"
                            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="fas fa-search fa-fw"></i>
                        </a>
                        <!-- Dropdown - Messages -->
                        <div class="dropdown-menu dropdown-menu-right p-3 shadow animated--grow-in"
                            aria-labelledby="searchDropdown">
                            <form class="form-inline mr-auto w-100 navbar-search">
                                <div class="input-group">
                                    <input type="text" class="form-control bg-light border-0 small"
                                        placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2" />
                                    <div class="input-group-append">
                                        <button class="btn btn-primary" type="button">
                                            <i class="fas fa-search fa-sm"></i>
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </li>

                    <div class="topbar-divider d-none d-sm-block"></div>

                    <!-- Nav Item - User Information -->
                    <li class="nav-item dropdown no-arrow">
                        <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button"
                            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <img src="{!! asset('theme/user_theme/img/janedoe.png') !!}" class="img-responsive dropuser" />&nbsp;&nbsp;<span
                                class="mr-2 d-none d-lg-inline text-gray-600 small">Jane Doe - Buyer Finder</span>
                        </a>
                        <!-- Dropdown - User Information -->
                        <div class="dropdown-menu dropdown-menu-right shadow animated--grow-in"
                            aria-labelledby="userDropdown">
                            <!-- <a class="dropdown-item" href="#">
                  <i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i>
                  Profile
                </a> -->
                            <a class="dropdown-item" href="settings">
                                <i class="fas fa-cogs fa-sm fa-fw mr-2 text-gray-400"></i>
                                Settings
                            </a>
                            <a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">
                                <i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
                                Logout
                            </a>
                        </div>
                    </li>
                </ul>
            </nav>
            <!-- End of Topbar -->

            <!-- Begin Page Content -->
            <div class="container-fluid">
                <!-- Page Heading -->
                <div class="d-sm-flex align-items-center justify-content-between mb-4">
                    <!-- <h1 class="h3 mb-0 text-gray-800">Dashboard</h1> -->
                    <a href="automarketer"><button type="button" class="btn btn-primary backdash">
                            <i class="fa fa-arrow-left" aria-hidden="true"></i> Back to
                            Automarketer V3 Dashboard
                        </button></a>
                    <div class="maintopsmall">
                        <p>
                        
                            <a href="{{asset('user/dashboard')}}"><span>Home</span></a>&nbsp; / &nbsp;&nbsp;
                        
                            <a href="{{asset('user/automarketer')}}"><span>Automarketer</span></a>
                        </p>
                    </div>
                    <!-- <a
                      href="#"
                      class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm"
                      > <i class="fas fa-download fa-sm text-white-50"> </i>  add Module</a
                  > -->
                </div>

                <!-- side mobile start -->

                <div class="autosidemodalarea">
                    <!-- <div class="col-sm-3 col-xl-2 order-1 order-sm-2 mt-4 float-right"> -->
                    <button class="modalopclick">
                        <a href="#" data-toggle="modal" data-target="#flyoutmodal"
                            class="btn btn-dark mt-2 w-md-100 text-center">Call</a>
                    </button>
                    <!-- </div> -->

                    <div class="modal" id="flyoutmodal" tabindex="-1" role="dialog" aria-hidden="true">
                        <div class="modal-dialog fadeInRight animated ml-auto" role="document">
                            <div class="modal-content mobilmodabod">
                                <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true" class="crossmobile">×</span>
                                </button>
                                <div class="modal-body">
                                    <h5 class="redsback">
                                        You can’t make any calls! (No Phone Number Assigned!)
                                    </h5>
                                    <h6 class="greensback">Refreshing...</h6>
                                    <!-- <h6 class="greensback">Offline</h6>
                      <h6 class="greensback">Ready</h6> -->

                                    <form>
                                        <div class="row">
                                            <div class="col-sm-8">
                                                <input type="text" class="form-control mobinp" placeholder="" />
                                            </div>
                                            <div class="col-sm-4">
                                                <div class="dropdown">
                                                    <div class="call-history-container">
                                                        <button class="btn btn-white btn-block dropdown-toggle"
                                                            type="button" data-toggle="dropdown" aria-expanded="false">
                                                            <i class="fa fa-refresh" aria-hidden="true"></i>
                                                            <span class="caret"></span>
                                                        </button>
                                                        <ul class="dropdown-menu dropdown-menu-right">
                                                            <li>(317) 640-7277</li>
                                                            <li>(317) 598-1220</li>
                                                            <li>(317) 884-8666</li>
                                                            <li>(317) 589-1220</li>
                                                            <li>(219) 274-9775</li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <input type="text" class="form-control entnumb" placeholder="Enter Number" />
                                    </form>

                                    <div class="row">
                                        <div class="col-sm-12 mobbordarea">
                                            <div class="mobbord">1</div>
                                            <div class="mobbord">2<br /><span>abc</span></div>
                                            <div class="mobbord">3<br /><span>def</span></div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-12 mobbordarea">
                                            <div class="mobbord">4<br /><span>ghi</span></div>
                                            <div class="mobbord">5<br /><span>jkl</span></div>
                                            <div class="mobbord">6<br /><span>mno</span></div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-12 mobbordarea">
                                            <div class="mobbord">7<br /><span>pqrs</span></div>
                                            <div class="mobbord">8<br /><span>tuv</span></div>
                                            <div class="mobbord">9<br /><span>wxyz</span></div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-12 mobbordarea">
                                            <div class="mobbord">*</div>
                                            <div class="mobbord">0<br /><span>+</span></div>
                                            <div class="mobbord">#</div>
                                        </div>
                                    </div>

                                    <div class="row sidemodallastcli">
                                        <div class="col-sm-8">
                                            <button type="button" class="btn btn-primary calldialclick">
                                                <i class="fa fa-phone" aria-hidden="true"></i>
                                            </button>
                                        </div>
                                        <div class="col-sm-4">
                                            <button type="button" class="btn btn-primary backdialclick">
                                                <i class="fa fa-arrow-left" aria-hidden="true"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- side mobile finish -->

                <!-- Write your content here -->

                <!-- step tabs start -->
                <div class="container-fluid">
                    <ul class="nav nav-tabs dashtabarea">
                        
                        <li class=" dashtab">
                            <a data-toggle="tab" class=" open_active" href="#home">Step 1
                                <span class="dashclicksmall">Campaign information</span></a>
                        </li>
                        <li class="dashtab">
                            <a data-toggle="tab" disabled>Step 2
                                <span class="dashclicksmall">Campaign filters</span></a>
                        </li>
                        <li class="dashtab">
                            <a data-toggle="tab"disabled>Step 3
                                <span class="dashclicksmall">Text & voice messages</span></a>
                        </li>
                        <li class="dashtab">
                            <a data-toggle="tab" disabled>Step 4
                                <span class="dashclicksmall">Activate Campaign</span></a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div id="home" class="tab-pane fade in active tabonweback">
                            <h3 class="tabonhead">Campaign information</h3>

                            {{-- form --}}


                            <div class="form-row tabonerow">
                                <div class="form-group col-md-6">
                                    <label for="inputCity">Campaign title</label>
                                    <input type="text" name="campaign_title" value="{{ $campaign->title ?? '' }}"
                                        id="campaign_title" class="form-control" id="information" />
                                    <input hidden id="campaign_id" value="{!! $campaign->id !!}" />
                                </div>
                                                                <div class="form-group col-md-6">
                                    <label for="inputState">Category</label>
                                    {!! Form::select('category', $category, $selected_category, ['class' => 'form-control category_Selected', 'data-parsley-required' => 'true', 'data-parsley-trigger' => 'change', 'required', 'onchange' => 'check_category(this)', 'maxlength' => '100']) !!}
                                </div>
                            </div>

                            <div class="form-row tabonerow">
                                <div class="form-group col-md-6">

                                </div>
                                <div class="form-group col-md-6">

                                </div>
                            </div>
                            <div class="row tabonerow">
                                <div class="col-md-6">
                                    <button type="button" class="btn btn-primary taboneleftclick"
                                        onclick='save_data_camapign()'>
                                        Save progress
                                    </button>
                                </div>
                                <div class="col-md-6">
                                    <button type="button" id="first_stepbtn" class="btn btn-primary tabonerightclick"
                                        data-toggle="tab" href="#menu1" hidden>
                                        Next

                                    </button>
                                </div>
                            </div>
                        </div>
                        <div id="menu1" class="tab-pane fade tabonweback">
                            <h3 class="tabonhead">Select Social Media Account</h3>
                            <hr>
                            <div class="form-row tabonerow">


                                

                                @foreach ($get_icons as $sm_key => $sm)
                                    <div class="form-group col-md-3">

                                        @foreach ($sm as $v)
                                                                                        <input type="checkbox" name="favorite_pet[]" value="{!! $v->id !!}"
                                                onclick="check_social_media('{!! $v->id !!}')" id="all_icons"
                                                {{ $checked }} class="multicheck social_media ">
                                            <i class="fa fa-facebook cpmicon" aria-hidden="true"></i>

                                            {!! $v->title !!}<br>
                                        @endforeach

                                    </div>
                                @endforeach





                            </div>


                            <div class="row tabonerow">
                                <div class="col-md-6">
                                    <button type="button" class="btn btn-primary taboneleftclick myt_save_ntn"
                                        onclick="save_click()">
                                        Save progress
                                    </button>
                                </div>
                                <div class="col-md-6">
                                    <button type="button" id="second_stepbtn" class="btn btn-primary tabonerightclick"
                                        data-toggle="tab" href="#menu2" hidden>
                                        Next
                                        <i class="fa fa-arrow-right" aria-hidden="true"></i>
                                    </button>
                                    {{-- <button type="button" class="btn btn-primary tabonerightclick smalspac"
                                        data-toggle="tab" href="#home">
                                        <i class="fa fa-arrow-left" aria-hidden="true"></i>
                                        Previous
                                    </button> --}}
                                </div>
                            </div>
                        </div>
                        <div id="menu2" class="tab-pane fade tabonweback">
                            <h3 class="tabonhead">Landing Pages</h3>
                            <hr>
                            <div class="close_area_for_seleted_landing">
                                <div class="form-row tabonerow">
                                                                        <div class="form-group col-md-12">
                                        <label for="inputState">Select Landing Pages</label>
                                        {!! Form::select('landing_page', $landing_page,$selected_landing, ['class' => 'form-control', 'onchange' => 'get_cktext()', 'id' => 'landing_dropdown', 'data-parsley-required' => 'true', 'data-parsley-trigger' => 'change', 'placeholder' => 'Select landing page', 'required', 'maxlength' => '100']) !!}
                                    </div>
                                </div>
                                <div class="row  ck_editors" style="display: block;">

                                    <input hidden id="campaign_id" value="{!! $campaign->id !!}" />

                                    <div class="form-group">
                                        {!! Form::label('landing_editor', 'Landing Editor') !!}
                                        <div>
                                            {!! Form::textarea('landing_editor', $selected_text, ['class' => 'form-control rich', 'id' => 'my_save_text', 'data-parsley-required' => 'true', 'data-parsley-trigger' => 'change', 'placeholder' => 'Enter Landing Editor', 'maxlength' => '100']) !!}
                                        </div>
                                    </div>



                                    {{-- <button type="button" class="btn btn-primary tabonerightclick"
                                        onclick="save_data_landing_area()">
                                        Save
                                        <i class="fa fa-arrow-right" aria-hidden="true"></i>
                                    </button> --}}


                                </div>
                                <div class="row tabonerow">
                                    <div class="col-md-6">
                                        <button type="button" class="btn btn-primary taboneleftclick"
                                            onclick="save_data_landing_area()">
                                            Save progress
                                        </button>
                                    </div>
                                    <div class="col-md-6">
                                        <button onclick="save_and_preview()"
                                            class="btn btn-primary tabonerightclick smalspac">
                                            <i class="fa fa-arrow-left" aria-hidden="true"></i>
                                            Save Preview
                                        </button>
                                        <button type="button" id="third_stepbtn"
                                            class="btn btn-primary tabonerightclick" data-toggle="tab" href="#menu3"
                                            hidden>
                                            Next
                                            <i class="fa fa-arrow-right" aria-hidden="true"></i>
                                        </button>
                                        {{-- <button type="button" class="btn btn-primary tabonerightclick smaspac"
                                            data-toggle="tab" href="#menu1">
                                            <i class="fa fa-arrow-left" aria-hidden="true"></i>
                                            Previous
                                        </button> --}}
                                    </div>
                                </div>
                            </div>


                        </div>

                        <div id="menu3" class="tab-pane fade tabonweback">
                            <div class="row tabonerowww">
                                <div class="col-md-12">
                                    <button type="button" class="btn btn-primary startgreen">
                                        <i class="fa fa-check" aria-hidden="true"></i> Start
                                        campaign now
                                    </button>
                                </div>
                            </div>
                            <div class="row tabonerowww">
                                <div class="col-md-12 ordata">
                                    <h1>OR</h1>
                                </div>
                            </div>
                                                        <div class="row tabonerowww">
                                <div class="col-md-6">
                                    <div class="form-group col-md-6">
                                        <label for="inputCity">Schedule campaign to start</label>
                                        <input type="date" value="{{$campaign_start_date}}" id="campaign_start" name="birthday" class="adfoinputt">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group col-md-6">
                                        <label for="inputCity">Schedule campaign to End</label>
                                        <input type="date" value="{{$campaign_end_date}}" id="campaign_end" name="birthday" class="adfoinputt">
                                    </div>
                                </div>
                            </div>
                            <div class="row tabonerow">
                                <div class="col-md-6">
                                    <button type="button" class="btn btn-primary taboneleftclick"
                                        onclick="date_camapign()">
                                        Save progress
                                    </button>
                                </div>
                                <div class="col-md-6">
                                    {{-- <button type="button" class="btn btn-primary tabonerightclick smalspac"
                                    data-toggle="tab" href="#menu2">
                                    <i class="fa fa-arrow-left" aria-hidden="true"></i>
                                    Previous
                                </button> --}}
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <!-- step tabs fibish -->
            </div>
            <!-- /.container-fluid -->
        </div>

        <!-- Footer -->
        <!-- <footer class="sticky-footer bg-white">
        <div class="container my-auto">
        <div class="copyright text-center my-auto">
          <span>Copyright © 2021 &copy; All Rights Reserved Designed by |
            <a href="https://hatinco.com/">HATINC.</a></span>
        </div>
        </div>
        </footer> -->
    </div>
@endsection
@section('app_jquery')
    
    <script>
        $(function() {
            $('.open_active').click();

            CKEDITOR.replace('my_save_text', {
                fullPage: true,
                allowedContent: true
            });

        

        
        });



        function check_category(e) {

            console.log('hellooooooopppppRRRR', e.value);
            let category_value_Selected = e.value;


        }


        function save_data_camapign() {

            var campaign_title = $('#campaign_title').val();
            var campaign_id = $('#campaign_id').val();
            var category_Selected = $('.category_Selected').val();

            console.log(campaign_title, 'campaign_titlecampaign_title');
            console.log(campaign_id, 'campaign_idcampaign_id');
            console.log(category_Selected, 'category_Selectedcategory_Selected');

            var my_url = '{!! asset("user/save_data_camapign/save") !!}'

            $.ajax({
                url: my_url,
                method: 'post',
                dataType: "json",
                data: {
                    'campaign_title': campaign_title,
                    'campaign_id': campaign_id,
                    'category_Selected': category_Selected,
                    '_token': '{!! csrf_token() !!}'

                },
                success: function(data) {
                    var p = data;
                    // var p = JSON.parse(data);
                    var data = data;
                    console.log('reeeeeeestatuse0', data.status);
                    console.log('reeeeeeestatuse1', data.status == true);

                    if (data.status == true) {
                        $('#first_stepbtn').click();
                        console.log('campaign_id');
                    }
                },
                error: function(err) {
                    console.log('error', err.responseText)
                }



            })

        }

        function save_click() {
            $('#second_stepbtn').click();

        }

        function check_social_media(e) {


            var social_media_id = e;
            console.log('social_media_idsocial_media_id', social_media_id);
            var campaign_id = $('#campaign_id').val();
            console.log(campaign_id, 'campaign_idcampaign_id');


            // console.log(facebook,'aaaaaaaaaaaa');

            var my_url = '{!! asset("user/save_social_media_data/save") !!}'
            $.ajax({
                url: my_url,
                method: 'post',
                dataType: "json",
                data: {
                    'social_media_id': social_media_id,
                    'campaign_id': campaign_id,
                    '_token': '{!! csrf_token() !!}'

                },
                success: function(data) {
                    console.log('re', data);
                    var data = data;
                    if (data.status == true) {

                        // $('.myt_save_ntn').click();
                        // $('#second_stepbtn').click();
                        console.log('second_stepbtnsecond_stepbtnsecond_stepbtn');
                    }
                },
                error: function(err) {
                    console.log('error', err.responseText)
                }
            })


        }


        function date_camapign() {

            var campaign_start = $('#campaign_start').val();
            var campaign_end = $('#campaign_end').val();
            var campaign_id = $('#campaign_id').val();
            // var category = $('#category').val();
            console.log(campaign_start, 'campaign_startcampaign_start');
            console.log(campaign_end, 'campaign_endcampaign_endcampaign_end');
            console.log(campaign_id, 'campaign_idcampaign_id');

            var my_url = '{!! asset("user/date_camapign/save") !!}'

            $.ajax({
                url: my_url,
                method: 'post',
                dataType: "json",
                data: {
                    'campaign_id': campaign_id,
                    'campaign_start': campaign_start,
                    'campaign_end': campaign_end,
                    '_token': '{!! csrf_token() !!}'

                },
                success: function(data) {
                    var p = data;
                    // var p = JSON.parse(data);
                    var data = data;
                    console.log('reeeeeeestatuse0', data.status);
                    console.log('reeeeeeestatuse1', data.status == true);

                    if (data.status == true) {
                        // $('#first_stepbtn').click();
                        console.log('campaign_endcampaign_endcampaign_end');
                        window.open('{!! asset("user/automarketer") !!}', '_self');
                    }
                },
                error: function(err) {
                    console.log('error', err.responseText)
                }



            })

        }

        function get_cktext() {
            var landing_id = $('#landing_dropdown').val();
            my_save_text
            var my_url = '{!! asset("user/landingpage") !!}/' + landing_id;
            $.ajax({
                url: my_url,
                method: 'get',
                dataType: "json",
                success: function(data) {
                    var p = data;
                    // var p = JSON.parse(data);
                    var data = data;
                    console.log('reeeeeeestatuse0', data.response);
                    console.log('reeeeeeestatuse0', data.response.html_text);
                    if (data.status == true) {
                        CKEDITOR.instances['my_save_text'].setData(data.response.html_text);
                    }
                },
                error: function(err) {
                    console.log('error', err.responseText)
                }



            })

        }

        // user/landing_preview save and step 3 open in this route
        function save_data_landing_area() {

            var landing_id = $('#landing_dropdown').val();
            var my_save_text = CKEDITOR.instances['my_save_text'].getData();
            var messageLength = CKEDITOR.instances['my_save_text'].getData().replace(/<[^>]*>/gi, '').length;
            if (!messageLength) {
                alert('Please enter a message');
                e.preventDefault();
            }
            var campaign_id = $('#campaign_id').val();
            // var category = $('#category').val();
            console.log('my_save_textmy_save_text', my_save_text);
            console.log(campaign_id, 'campaign_idcampaign_id');
            console.log('landing_dropdown', $('#landing_dropdown').val());
// return;
            var my_url = '{!! asset("user/save_data_landing_area") !!}';

            $.ajax({
                url: my_url,
                method: 'post',
                dataType: "json",
                data: {
                    'my_save_text': my_save_text,
                    'landing_id': landing_id,
                    'campaign_id': campaign_id,
                    '_token': '{!! csrf_token() !!}'

                },
                success: function(data) {
                    var p = data;
                    // var p = JSON.parse(data);
                    var data = data;
                    console.log('reeeeeeestatuse0', data.status);
                    console.log('reeeeeeestatuse1', data.status == true);

                    if (data.status == true) {
                        $('#third_stepbtn').click();
                        console.log('campaign_endcampaign_endcampaign_end');
                    }
                },
                error: function(err) {
                    console.log('error', err.responseText)
                }
            })

        }
        // landing area save and preview ..not step 3 open in this route..  // automaticaly new page open with javascript
        function save_and_preview() {
            var my_save_text = CKEDITOR.instances['my_save_text'].getData();
            var campaign_id = $('#campaign_id').val();
            var landing_id = $('#landing_dropdown').val();

            var my_url = '{!! asset("user/save_check_landing_data/save") !!}'
            $.ajax({
                url: my_url,
                method: 'post',
                dataType: "json",
                data: {
                    'landing_id': landing_id,
                    'campaign_id': campaign_id,
                    'my_save_text': my_save_text,
                    '_token': '{!! csrf_token() !!}'
                },
                success: function(data) {
                    console.log('re', data);
                    var data = data;
                    if (data.status == true) {

                        window.open('{!! asset("user/landing_preview_new_page") !!}/' + campaign_id, '_blank');
                        // $('#third_stepbtn').click();
                    }
                },
                error: function(err) {
                    console.log('error', err.responseText)
                }
            })

        }
        </script>
        <script>

        $(function(){
    // CKEDITOR.replace('content', {
    //         fullPage: true,
    //         extraPlugins: 'font,panelbutton,colorbutton,colordialog,justify,indentblock,aparat,buyLink',
    //         // You may want to disable content filtering because if you use full page mode, you probably
    //         // want to  freely enter any HTML content in source mode without any limitations.
    //         allowedContent: true,
    //         autoGrow_onStartup: true,
    //         enterMode: CKEDITOR.ENTER_BR
    //     });
})
    </script>
    <script src="//cdn.ckeditor.com/4.14.1/standard/ckeditor.js"></script>
@endsection