@extends('layouts.app')
@section('content')

@section('cssfiles')
<link href="{{ asset('css/skins/style.css') }}" rel="stylesheet">
@endsection

<div class="col-md-10 col-md-offset-1">
	<div class="row">
        <div class="col-xs-12 col-md-6">
            <table class="table table-hovered">
                <thead>
                    <tr>
                        <th>UTM Campaign</th>
                        <th>UTM Source</th>
                        <th>UTM Description</th>
                        <th></th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($campaigns as $camp)
                        <tr>
                            <td class="campaign_{{$camp->id}}">{{$camp->utm_campaign}}</td>
                            <td class="campaign_{{$camp->id}}">{{$camp->utm_source}}</td>
                            <td class="campaign_{{$camp->id}}">{{$camp->description}}</td>
                            <td class="hide campaign_{{$camp->id}}">{{$camp->code}}</td>
                            <td><button type="button" class="btn" onclick="fillForm({{$camp->id}})">UPDATE</button></td>
                            <td><button type="submit" class="btn" data-toggle="modal" data-target="#deleteModal{{$camp->id}}">DELETE</button>
                            <!-- Delete Modal -->
                                <div id="deleteModal{{$camp->id}}" class="modal fade" role="dialog">
                                    <div class="modal-dialog">
                                        <!-- Modal content-->
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <button type="button" class="close" data-dismiss="modal">&times;</button>
                                                <h4 class="modal-title">Delete Campaign</h4>
                                            </div>
                                            <div class="modal-body">
                                                <form class="form-horizontal" role="form" method="POST" action="{{url('campaigns/'.$camp->id)}}" enctype="multipart/form-data">
                                                    {{ csrf_field() }}
                                                    {{ method_field('DELETE') }}
                                                    <div class="row">
                                                        <div class="form-group">
                                                            <label class="col-md-4 control-label">Campaign: </label>
                                                            <div class="col-md-6">
                                                                <label class="control-label">{{$camp->utm_campaign}}</label>
                                                            </div>
                                                        </div>
                                                        <div class="form-group">
                                                            <p>This campaign may be running and can be impacted. <br/>Are you sure you want to DELETE It?</p>
                                                        </div>
                                                        <div class="form-group">
                                                            <div class="col-12 text-center">
                                                                <button type="submit" class="confirm_delete btn btn-danger">Yes, Delete</button>
                                                                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
		<div class="col-xs-12 col-md-6">
			<div class="panel panel-default">
                <div class="panel-heading">Campaign</div>
                <div class="panel-body">
                    <form class="form-horizontal" id="campaign_form" role="form" method="POST" action="{{url('/campaigns')}}" enctype="multipart/form-data">
                        {{ csrf_field() }}

						<div class="form-group">
                            <label for="utm_campaign" class="col-md-4 control-label">UTM Campaign</label>
                            <div class="col-md-8">
                                <input id="utm_campaign" type="text" class="form-control" name="utm_campaign" required/>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="utm_source" class="col-md-4 control-label">UTM Source</label>
                            <div class="col-md-8">
                                <input id="utm_source" type="text" class="form-control" name="utm_source" />
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="description" class="col-md-4 control-label">Description</label>
                            <div class="col-md-8">
                                <input id="description" type="text" class="form-control" name="description" />
                            </div>
                        </div>

                        {{-- Template List to associate campaign --}}
                        <div class="form-group">
                            <label for="template" class="col-md-4 control-label">Templates</label>
                            <div class="col-md-6">
                                <select class="form-control" id="template" name="template">
                                    <option value="">---</option>
                                    @foreach($templates as $template)
                                       <option value="{{$template->id}}">{{$template->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        {{-- Skin List to start out with --}}
                        <div class="form-group">
                            <label for="skin" class="col-md-4 control-label">Skins</label>
                            <div class="col-md-6">
                                <select class="form-control" id="skin" name="skin">
                                    <option value="">---</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="code" class="col-md-4 control-label">Code</label>
                            <div class="col-md-6">
                                <textarea class="form-control code" id="code" cols="30" rows="10" style="width:100%;"></textarea>
                                <input type="hidden" name="code" id="code1" />
                            </div>
                        </div>

                        {{-- <div class="form-group">
                            <label for="code" class="col-md-4 control-label">Code</label>
                            <div class="col-md-8">
                                <textarea id="code" class="form-control" name="code"></textarea>
                            </div>
                        </div> --}}
                        {{--<input type="hidden" name="code" id="code" />--}}
                        <div class="form-group">
                            <div class="col-md-6 col-md-offset-4" id="btnSubmitCont">
                                <button type="button" id="btn_submit" class="btn btn-primary">
                                    CREATE
                                </button>
                            </div>
                            <div class="col-md-6 col-md-offset-4" id="btnUpdateCont" style="display:none;">
                                <button type="button" id="btn_update" class="btn btn-primary" data-toggle="modal" data-target="#updateModal{{$camp->id}}">
                                    UPDATE
                                </button>

                            </div>
                            <div id="updateModal{{$camp->id}}" class="modal fade" role="dialog">
                                <div class="modal-dialog">
                                    <!-- Modal content-->
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                                            <h4 class="modal-title">Update Campaign</h4>
                                        </div>
                                        <div class="modal-body">
                                            <div class="row">
                                                <div class="form-group">
                                                    <label class="col-md-4 control-label">Campaign: </label>
                                                    <div class="col-md-6">
                                                        <label class="control-label">{{$camp->utm_campaign}}</label>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <p>This campaign may be running and can be impacted. <br/>Are you sure you want to UPDATE It?</p>
                                                </div>
                                                <div class="form-group">
                                                    <div class="col-md-6 col-md-offset-4">
                                                        <button type="submit" id="btn_submit" class="confirm_update btn btn-success">Update</button>
                                                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                   </form>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-xs-6">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <ul class="nav nav-tabs">
                        <li class="active"><a data-toggle="tab" href="#variables">Variables</a></li>
                        <li><a data-toggle="tab" href="#css">CSS</a></li>
                    </ul>
                </div>
                <div class="panel-body">
                    <div class="tab-content">
                        <div id="variables" class="tab-pane fade in active"></div>
                        <div id="css" class="tab-pane fade">
                            <div class="row">
                                <div class="col-xs-12">
                                    <label class="edit_field" for="background_css">Background Image</label><br/>
                                    <textarea id="background_css" class="edit_field" rows="3" name="background_css"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="panel panel-default scroll_div">
                <div class="panel-heading">Template</div>
                <i class="fa fa-arrows-alt arrow" data-toggle="modal" data-target="#maximize" aria-hidden="true"></i>
                <iframe class="panel-body template" id="preview_div">
                    
                </iframe>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div id="maximize" class="modal fade col-xs-12" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Preview</h4>
            </div>
            <div class="modal-body">
                <iframe id="preview_modal"></iframe>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<script>
    var border = '';

    $(document).ready(function(){
        //add to form submission when code is added to textarea
        $("#code").change( function () {
            $("#code1").val($(this).val());
        });


        var frame = $('#preview_div'), 
            contents = frame.contents(),
            body = contents.find('body'),
            head = contents.find('head'),
            css = contents.find('head').append('<style></style>').children('style');

        //Make preview scroll with window
        var scroll_div = $('.scroll_div').offset().top;
        $(window).scroll(function(){            
            var window_top = $(this)[0].scrollY;
            if(window_top >= scroll_div){
                $('.scroll_div').addClass('fixed');
            }else{
                $('.scroll_div').removeClass('fixed');
            }
        });
        var num_elements = 0;
        function skinConfig () {
            num_elements = 0;
            //Is template selected? Open configs
            var id = $('#template').val();
            if($.isNumeric(id)){
                $.ajax({
                    url: '/templates/'+id+'/content',
                    type: 'get',
                    success: function (data) {
                        $('.template, #variables').empty();

                        head.append(data[0]);
                        body.append(data[1]);
                        
                        //Head elements
                        head.find('.lp_edit').each(function(){
                            $(this).removeClass('lp_edit').addClass('field'+ (++num_elements));

                            //The name of the field
                            var elemType = $(this).prop('nodeName');
                            $('#variables').append('<div class="row"><div class="col-xs-12"><label class="edit_field" for="field'+num_elements+'">Field '+ num_elements + ' (' + elemType + ')</label>');
                            $('#variables').append('<textarea id="field'+num_elements+'" class="edit_field" rows="3" onmouseleave="leaveField('+num_elements+')" onmouseover="hoverField('+num_elements+')" onkeyup="changeField('+num_elements+');" name="field'+num_elements+'"></textarea></div></div>');
                        });
                        //Body elements
                        body.find('.lp_edit').each(function(){
                            $(this).removeClass('lp_edit').addClass('field'+ (++num_elements));
                            
                            //The name of the field
                            var elemType = $(this).prop('nodeName');
                            $('#variables').append('<div class="row"><div class="col-xs-12"><label class="edit_field" for="field'+num_elements+'">Field '+ num_elements + ' (' + elemType + ')</label>');
                            $('#variables').append('<textarea id="field'+num_elements+'" class="edit_field" rows="3" onmouseleave="leaveField('+num_elements+')" onmouseover="hoverField('+num_elements+')" onkeyup="changeField('+num_elements+');" name="field'+num_elements+'"></textarea></div></div>');
                        });

                        $.ajax({
                            url: '/templates/' + id + '/skins',
                            type: 'get',
                            success: function (data) {
                                $('#skin').empty().append('<option value="">---</option>');
                                $(data).each(function(key, val){
                                    $('#skin').append('<option value='+val.id+'>'+val.name+'</option>')
                                });
                            }
                        });
                    }
                });
            }
        }

        $('#skin').change(function(){
            $.ajax({
                url: '/skins/' + $(this).val() + '/configs',
                data: {},
                success: function (data) {
                    let skin_config = data;
                    //First put values inside the textareas
                    $.each(skin_config, function valuesInFields(key, val) {
                        $("#"+val['item_name']).html(val['value']);
                    });
                    //Second apply them to the preview
                    $.each(skin_config, function valuesInFields(key, val) {
                        changeField(key+1);
                    });
                }
            });
        });


        //Create
        $('#template').change(function(){
            skinConfig();
        });

        //Edit
        $('#template option:selected').each(function(){
            skinConfig();
        });

        $('#btn_submit').click(function(){
            var frame = $('#preview_div'), 
                contents = frame.contents();
            let elem = '';
            let jquery = '<script>\n$(document).ready(function(){\n';
            for(let i = 0; i < num_elements; i++){
                if(i == 1) continue;
                elem = contents.find('.field'+ (i+1));
                txt = $('#field'+(i+1)).val();
                console.log(elem);

                if(elem.is('img')){
                    console.log("IMG");
                    jquery += '$(".lp_edit:eq('+i+')").attr("src", "'+txt+'");\n';
                }else{
                    
                    txt = txt.replace(/[\n\r]/g, '');
                    txt = txt.replace(/["]/g, '\'');
                    jquery += '$(".lp_edit:eq('+i+')").html("'+txt+'");\n';
                }
            }
            if($('#background_css').val() != ''){
                jquery += '$("body, .wrapper").css("background", "url('+ $('#background_css').val() +') no-repeat center top fixed");\n'
            }
            jquery += '});\n<\/script>';
            $('#code').val(jquery);
            $("#campaign_form").submit();
        });

        //On before open modal of preview
         /* $('#maximize').on('shown.bs.modal', function() {
             var b = $('#preview_div').contents().find('body').children();
             var h = $('#preview_div').contents().find('head').children();
             var c = $('#preview_modal').find('head').append('<style></style>').children('style');
            
             //Append head to modal iframe
             $('#preview_modal').contents().find('head').append(h);
             //Append body to modal iframe
             $('#preview_modal').contents().find('body').append(b);
             //Append css to head of modal iframe
             c.append(cssContent);
         }); */
    });

    function hoverField(field_num){
        var frame = $('#preview_div'), 
            contents = frame.contents(),
            body = contents.find('body'), 
            css = contents.find('head').append('<style></style>').children('style');
        border = body.find('.field'+field_num).css('border');
        body.find('.field'+field_num).css('border', '5px solid #000');
    }

    function leaveField(field_num){
        var frame = $('#preview_div'), 
            contents = frame.contents(),
            body = contents.find('body'), 
            css = contents.find('head').append('<style></style>').children('style');
        body.find('.field'+field_num).css('border', border);
    }

    var prev_val;
    function changeField(field_num){
        var frame = $('#preview_div'), 
            contents = frame.contents(),
            body = contents.find('body');
        var val = $('#field'+field_num).val();
        let elem = contents.find('.field'+field_num);
        console.log(elem);
        if(elem.is("img")) { //If field is image, change it's source
            elem.attr('src', val); 
        }else if(elem.is("i")) { //If field is icon, change it's class name
            elem.removeClass(prev_val).addClass(val);
            prev_val = val;
        }else { //Else just add normally the contents
            elem.html(val);
        }
        return 0;
    }

    function fillForm(id){
        $('#campaign_form').prepend('{{ method_field('PUT') }}').attr('action', '{{url('/campaigns')}}' + '/' + id);
        $("#btnSubmitCont").css("display", "none");
        $("#btnUpdateCont").css("display", "block");

        $('.campaign_'+id).each(function(index){
            switch(index) {
                case 0:
                    $('#utm_campaign').val($(this).html());
                    break;
                case 1:
                    $('#utm_source').val($(this).html());
                    break;
                case 2:
                    $('#description').val($(this).html());
                    break;
                case 3:
                    $('#code').html($(this).html());
                    break;
                case 4:
                    $('#code').html('');
                    $('#code').html($(this).html());
                    $('#code1').val('');
                    alert($(this).html());
                    $('#code1').val($(this).html());
                    break;
                default:
                    break;
            }
        });
    }
</script>

@endsection