@extends('layouts.app')
@section('content')
    <link href="{{asset('css/site.css')}}" rel="stylesheet" >

    {{--<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>--}}

<div class="container">
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <div class="panel panel-default">
                <form id="form1" role="form" method="POST" action="{{Request::url() == url('/sites/create') ? url("/sites") : url("/sites/".$currentSite->id)}}">
                    {{ csrf_field() }}
                    {{Request::url() == url('/sites/create') ? '' : method_field('PUT')}}
                    <div class="panel-heading">{{Request::url() == url('/sites/create') ? 'Create Site' : 'Edit Site'}}</div>
                    <div class="panel-body">

                    <div class="col-xs-6">
                        <label>Site Info:</label>
                        <div class="form-group">
                            <label for="url">URL*:</label>
                            <select id="domains" class="form-control" name="domain" required>
                                <option value="" disabled>---</option>
                                @foreach($domains as $domain)
                                    {{-- @if($domain->id == @$currentSite->domain()->first()->id)
                                        <option value="{{$domain->id}}" selected>{{$domain->domain}}</option>
                                    @else
                                        <option value="{{$domain->id}}">{{$domain->domain}}</option>
                                    @endif --}}
                                    <option value="{{$domain->id}}">{{$domain->domain}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="description">Description:</label>
                            <input type="text" class="form-control" id="description" name="description" value="{{@$currentSite->description}}">
                        </div>
                        <div class="form-group">
                            <label for="country">Country:</label>
                            <select name="country" class="form-control">
                                @foreach ($countries as $iso => $con)
                                    <option value="{{ $iso }}" {{@$currentSite->country == $iso ? 'selected' : ''}} >{{$con}}</option>
                                @endforeach 
                            </select>
                            {{-- <input type="text" class="form-control" id="country" name="country" value="{{@$currentSite->country}}"> --}}
                        </div>
                        <div class="form-group">
                            <label for="language">Language:</label>
                            <select  name="language" class="form-control">
                                <option value="PT"{{@$currentSite->language == 'PT' ? 'selected' : ''}} >PT</option>
                                <option value="BR"{{@$currentSite->language == 'BR' ? 'selected' : ''}} >BR</option>
                                <option value="EN"{{@$currentSite->language == 'EN' ? 'selected' : ''}} >EN</option>
                                <option value="FR"{{@$currentSite->language == 'FR' ? 'selected' : ''}} >FR</option>
                                <option value="ES"{{@$currentSite->language == 'ES' ? 'selected' : ''}} >ES</option>
                                <option value="DE"{{@$currentSite->language == 'DE' ? 'selected' : ''}} >DE</option>
                            </select>
                            {{--<input type="text" class="form-control" id="language" name="language" value="{{@$currentSite->language}}">--}}
                        </div>
                        <div class="form-group">
                            <label for="tag">Tag:</label>
                            <input type="text" class="form-control" id="tag" name="tag" value="{{@$currentSite->tag}}">
                        </div>
                        <div class="form-group">
                            <label for="gtm">GTM Code*</label>
                            <input type="text" class="form-control" placeholder="Example: GTM-5MRNQDF" id="gtm" name="gtm" value="{{@$currentSite->gtm}}" required>
                        </div>
                        <div class="checkbox">
                            <label><input type="checkbox" value="yes" id="is-active" name="is_active" {{@$currentSite->is_active == 1 ? 'checked' : ''}}>Is Active</label>
                        </div>
                        <div class="form-group">
                            <label for="template">Select Template*:</label>
                            <select class="form-control drop-opt" id="template" name="template" required autofocus>
                                <option value="" selected disabled>---</option>
                                @foreach($templates as $template)
                                    <option value="{{$template->id}}" {{@$currentSite->template_id == $template->id ? 'selected' : ''}}>{{$template->name}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="skin-default">Select Skin Default* :</label>
                            <select class="form-control" id="skin-default" name="skin_default" required autofocus>
                            </select>
                        </div>
                        <div class="form-group">
                            <small>If you want to add a special skin for an event, season, holiday...</small><br>
                            <label for="special-skin">Select Special Skin:</label>
                            <select class="form-control" id="special-skin" name="special_skin">
                            </select>
                        </div>
                        <div class="form-group col-xs-6">
                            <label for="start-date">Start Date:</label>
                            <input type="date" class="form-control" value="{{@$beginEndDate[0]}}" id="start-date" name="start_date">
                        </div>
                        <div class="form-group col-xs-6">
                            <label for="end-date">End Date:</label>
                            <input type="date" class="form-control" value="{{@$beginEndDate[1]}}" id="end-date" name="end_date">
                        </div>
                        <input type="hidden" id="sd" name="sd">
                        <input type="hidden" id="ss" name="ss">
                        <button id="create" type="button" style="float: right" class="btn btn-success">
                            {{Request::url() == url('/sites/create') ? 'Create' : 'Update'}}
                        </button>
                    </div>
                    <div class="col-xs-6">
                        <label>Preview:</label>
                        <i class="fa fa-arrows-alt arrow" data-toggle="modal" data-target="#maximize" aria-hidden="true"></i>
                        <div class="form-group border preview-size" id="preview-window">
                        </div>
                    </div>
                </div>
                </form>
            </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">
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </div>
    </div>
</div>

<script>

    $(document).ready(function(){

        loadSkins();

        $('#create').click(function(){
            $(this).prop("disabled", true);
            $.ajax({
                url: '/checkdirectory',
                type: 'get',
                data: {'url' : $('#domains').find(":selected").text()},
                success: function (data) {
                    console.log(data);
                    if(data['message'] == 'true'){
                        $("#sd").val($("#skin-default").val());
                        $("#ss").val($("#special-skin").val());
                        $('#form1').submit();
                    }else if(data['message'] == 'overwrite'){
                        if (confirm('Are you sure you want to overwrite on the existing files?')) {
                            $("#sd").val($("#skin-default").val());
                            $("#ss").val($("#special-skin").val());
                            $('#form1').submit();
                        }else{
                            $('#create').prop("disabled", false);
                            return false;
                        }
                    }else if(data['message'] == 'abort'){
                        $('#create').prop("disabled", false);
                        alert('There is an anomaly. Please contact the IT team');
                        console.log(data['countFiles']);
                        console.log(data['countFiles2']);
                        return false;
                    }
                }
            });
        });

        function loadSkins () {
            var id = $("#template").val();
            var isEdit = {!! @$currentSite == '' ? 'null' : $currentSite !!};
            if (isEdit !== null) {
                var url = '../skindefault/'+id;
            }
            else {
                var url = 'skindefault/'+id;
            }
            $.ajax({
                url: url,
                type: 'get',
                dataType: 'JSON',
                success: function (data) {
                    $("#skin-default").empty().append('<option value="" selected disabled>---</option>');
                    $("#special-skin").empty().append('<option value="" selected>---</option>');
                    $.each(data[1], function(key, val) {
                        if (val['id'] == {!! @$currSkins[1] == '' ? '0' : @$currSkins[1] !!}) {
                            $("#skin-default").append('<option value=' + val['id'] + ' selected>' + val['name'] + '</option>');
                        } else {
                            $("#skin-default").append('<option value=' + val['id'] + '>' + val['name'] + '</option>');
                        }
                    });
                    $.each(data[2], function(key, val) {
                        if (val['id'] == {!! @$currSkins[0] == '' ? '0' : @$currSkins[0] !!}) {
                            $("#special-skin").append('<option value=' + val['id'] + ' selected>' + val['name'] + '</option>');
                        } else {
                            $("#special-skin").append('<option value=' + val['id'] + ' >' + val['name'] + '</option>');
                        }
                    });

                    //When user is editing
                    changeSkinDef();
                }
            });
        }

        //Preview Template on second window - ajax request to return default skin for template selected by user
        $(".drop-opt").change(function(){
            loadSkins();
            $("#preview-window").html("");
        });

        //Preview Skins
        var totalElements = 0;
        var prev_val;
        var defaultStart;

        function changeSkinDef () {
            $("#preview-window").html("");
            var isEdit = {!! @$currentSite == '' ? 'null' : $currentSite !!};
            var idDefault = ($("#skin-default option:selected").val());
            if (isEdit !== null) {
                var url = '../sd/'+idDefault;
            }
            else {
                var url = 'sd/'+idDefault;
            }
            $.ajax({
                url: url,
                type: 'get',
                dataType: 'JSON',
                success: function (data) {
                    totalElements = data[0];
                    defaultStart = data[1];
                    console.log(jQuery.parseJSON(data[1]));
                    $("#preview-window").append(jQuery.parseJSON(data[1]));

                    //When user is editing
                    changeSkinSpe();
                }
            });
        }

        function changeSkinSpe () {
            $("#preview-window").html("");
            $("#preview-window").append(jQuery.parseJSON(defaultStart));

            var isEdit = {!! @$currentSite == '' ? 'null' : $currentSite !!};
            var idSpecial = ($("#special-skin option:selected").val());
            if (isEdit !== null) {
                var url = '../ss/'+idSpecial;
            }
            else {
                var url = 'ss/'+idSpecial;
            }
            $.ajax({
                url: url,
                type: 'get',
                dataType: 'JSON',
                success: function (data) {
//                    console.log(data);
                    for(var i = 1; i <= totalElements+1; i++) {
                        $.each(data, function (key, value) {
//                            console.log(value['item_name']);
                            var val = value['item_name'];
                            console.log(val);
                            if(val == 'field'+i) {
                                if ($('#preview-window').find('.field' + i).is("img")) {
//                                console.log($('#preview-window').find('.field' + i).prop('nodeName'));
                                    $('#preview-window').find('.field' + i).attr('src', value['value']);
                                    console.log("entrou1");
                                }
                                else if ($('#preview-window').find('.field' + i).is("i")) {
                                    $('#preview-window').find('.field' + i).removeClass('fa');
                                    $('#preview-window').find('.field' + i).removeClass(function (index, className) {
                                        return (className.match (/(^|\s)fa-\S+/g) || []).join(' ');
                                    });
                                    $('#preview-window').find('.field' + i).addClass(value['value']);
                                    prev_val = val;
                                    console.log("i");
                                }
                                else {
                                    $('#preview-window').find('.field' + i).html(value['value']);
                                }
                            }
                        });
                    }
                }
            });
        }



        $( "#skin-default" ).change(function() {
            changeSkinDef();
        });

        $( "#special-skin" ).change(function() {
            changeSkinSpe();
        });

        //On before open modal of preview
        $('#maximize').on('shown.bs.modal', function() {
            $(".modal-body").html("");
            $(".modal-body").append($("#preview-window").html());
//            alert("asd");
        }) ;

    });



</script>

@endsection