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

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

<div class="container">
    <form class="form-horizontal" id="skin_form" role="form" method="POST" action="{{Request::url() == url('/skins/create') ? url("/skins") : url("/skins/".$skin->id)}}" enctype="multipart/form-data">
        {{ csrf_field() }}
        {{Request::url() == url('/skins/create') ? '' : method_field('PUT')}}

        <div class="row">
            <div class="col-xs-12">
                <div class="panel panel-default">
                    <div class="panel-heading">Create Skin</div>
                    <div class="panel-body">
                        {{-- Skin Name --}}
                        <div class="form-group">
                            <label for="name" class="col-md-4 control-label">Skin Name</label>
                            <div class="col-md-6">
                                <input id="name" type="text" class="form-control" name="name" value="{{@$skin->name}}" required/>
                            </div>
                        </div>
                        {{-- Skin Language --}}
                        <div class="form-group">
                            <label for="language" class="col-md-4 control-label">Language</label>
                            <div class="col-md-6">
                                <input id="language" type="text" class="form-control" name="language" value="{{@$skin->language}}"/>
                            </div>
                        </div>
                        {{-- Is Skin Default --}}
                        <div class="form-group">
                            <label for="is_default" class="col-md-4 control-label">Is Generic Skin</label>
                            <div class="col-md-1">
                                <input id="is_default" type="checkbox" class="form-control" name="is_default" value="true" {{@$skin->is_default == '1' ? 'checked' : ''}}/>
                            </div>
                        </div>
                        {{-- Template List to associate skin --}}
                        <div class="form-group">
                            <label for="template" class="col-md-4 control-label">Templates</label>
                            <div class="col-md-6">
                                <select id="template" name="template" {{@$skin->is_default == '1' ? 'required' : ''}}>
                                    <option value="">---</option>
                                    @foreach($templates as $template)
                                        @if(@$skin != null)
                                            @if(@$skin->templates()->first()->id == $template->id)
                                                <option value="{{$template->id}}" selected>{{$template->name}}</option>
                                            @else
                                                <option value="{{$template->id}}">{{$template->name}}</option>
                                            @endif
                                        @else
                                            <option value="{{$template->id}}">{{$template->name}}</option>
                                        @endif
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        {{--Send Code for Preview--}}
                        <input id="preview" type="hidden" class="form-control" name="preview"/>
                        {{-- Create and Cancel buttons --}}
                        <div class="form-group">
                            <div class="col-md-6 col-md-offset-4">
                            @if($action == 'create')
                                <button type="submit" class="btn btn-primary">Create</button>
                            @else
                                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#updateModal{{$skin->id}}">Update</button>
                            @endif
                                <button type="button" onclick="window.location.assign('/skins')" class="btn btn-primary">
                                    Cancel
                                </button>
                            </div>
                        </div>
                        @if($action != 'create')
                        <!-- Update Modal -->
                        <div id="updateModal{{$skin->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 Skin</h4>
                                    </div>
                                    <div class="modal-body">
                                        <div class="row">
                                            <div class="form-group">
                                                <label class="col-md-4 control-label">Skin: </label>
                                                <div class="col-md-6">
                                                    <label class="control-label">{{$skin->name}}</label>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                            @if(count($skin->sites()->get()))
                                                <p>This Skin may impact with the following sites. Are you sure you want to update it?</p>
                                            @else
                                                <p>Go ahead, you can safely update this skin!</p>
                                            @endif
                                            </div>
                                            @if(count($skin->sites()->get()))
                                            <div class="form-group">
                                                <label class="col-md-4 control-label">Associated sites: </label>
                                                <div class="col-md-6">
                                                    <ul class="skin-list">
                                                        @foreach($skin->sites()->get() as $site)
                                                            <li>{{$site->description}}</li>
                                                        @endforeach
                                                    </ul>
                                                </div>
                                            </div>
                                            @endif
                                            <div class="form-group">
                                                <div class="col-12 text-center">
                                                    <button type="submit" class="confirm_delete btn btn-danger">Update</button>
                                                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endif
                    </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" class="hide" href="#css">CSS</a></li>
                            <li><a data-toggle="tab" class="hide" href="#meta">Meta</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" onkeyup="changeCSS();"></div>
                            <div id="meta" class="tab-pane fade"></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>
    </form>
</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 = '';
    var cssContent = {!! @$skin ? json_encode(@$skin->skin_configs()->where("item_name", "global_css")->first()->value) : "null" !!};

    $(document).ready(function(){


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

        //Is skin default? Open css and meta
        $('#is_default').change(function() {
            if($('#is_default').prop('checked')==true){
                $('a[href="#css"]').removeClass('hide');
                $('a[href="#meta"]').removeClass('hide');
            } else {
                $('a[href="#css"]').addClass('hide');
                $('a[href="#meta"]').addClass('hide');
            }
        });

        //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');
            }
        });

        function skinConfig () {
            var num_elements = 0;
            var num_metas = 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, #css').empty();
                        $('#css').append('<textarea cols="70%" rows="15" name="css_code">' + cssContent + '</textarea>');
                        css.append(cssContent);
                        head.append(data[0]);
                        body.append(data[1]);

                        //Head elements

                       // Verifica se a skin é default, e caso seja faz append dos metatags para puderem ser alterados
                        // A selecção se é default ou não tem de ser feita primeiro antes de escolher o template.
                        let checkDefault = document.getElementById('is_default');

                        if(checkDefault.checked == true) {
                            head.find('.lp_meta').each(function() {
                            $(this).removeClass('lp_edit').addClass('field_meta'+ (++num_metas));

                                //The name of the field
                                var elemType = $(this).prop('nodeName');
                                var conteudo = $(this).prop('content');
                                var elemName = $(this).prop('name');
                                $('#meta').append('<div class="row"><div class="col-xs-12"><label class="edit_field" for="field_meta'+num_metas+'">Field '+ num_metas + ' (' + elemType + ' - ' + elemName + ')</label>');
                                $('#meta').append('<textarea id="field_meta'+num_metas+'" class="edit_field" rows="5"  name="field_meta'+num_metas+'">' + conteudo + '</textarea></div></div>');
                                });
                        }

                        head.find('.lp_edit').each(function(){
                            $(this).removeClass('lp_edit').addClass('field'+ (++num_elements));

                            //The name of the field
                            var elemType = $(this).prop('nodeName');
                            var string = "'field"+num_elements+"'";
                            $('#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="5" onmouseleave="leaveField('+num_elements+')" onmouseover="hoverField('+num_elements+')" onkeyup="changeField('+string+');" 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');
                            var string = "'field"+num_elements+"'";
                            $('#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="5" onmouseleave="leaveField('+num_elements+')" onmouseover="hoverField('+num_elements+')" onkeyup="changeField('+string+');" name="field'+num_elements+'"></textarea></div></div>');
                        });
                        //If editing a Skin:
                        var skin_config = {!! @$skin ? @$skin->skin_configs()->get() : 'null' !!};
                        //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(val['item_name']);
                        });
                    }
                });
            }
        }

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

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

        //Send Form
        $("#skin_form").submit( function () {
            $("#preview").val($("#preview_div").contents().find('html').html());
            console.log($("#preview").text());
//            console.log($("#preview_div").contents().find('html').html());
//            alert("");
            return 0;
        });

        //On before open modal of preview
        $('#maximize').on('shown.bs.modal', function() {
            $('#preview_modal').contents().find('head').html("");
            $('#preview_modal').contents().find('body').html("");
            var b = $('#preview_div').contents().find('body').clone().children();
            var h = $('#preview_div').contents().find('head').clone().children();

            //Append head to modal iframe
            $('#preview_modal').contents().find('head').append(h);
            //Append body to modal iframe
            $('#preview_modal').contents().find('body').append(b);

        });
    });

    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_val){
        var frame = $('#preview_div'),
            contents = frame.contents(),
            body = contents.find('body');
        var val = $('#'+field_val).val();

        if(body.find('.'+field_val).is("img")) { //If field is image, change it's source
            body.find('.'+field_val).attr('src', val);
        }else if(body.find('.'+field_val).is("i")) { //If field is icon, change it's class name
            body.find('.'+field_val).removeClass(prev_val).addClass(val);
            prev_val = val;
        }else { //Else just add normally the contents
            body.find('.'+field_val).html(val);
        }

        return 0;
    }

    function changeCSS () {
        var frame = $('#preview_div'),
            contents = frame.contents(),
            head = contents.find('head');
        head.find('style').html($("#css textarea").val());
    }


</script>

@endsection