{% extends "Intranet/Global.php.twig" %}



{% block header %}
    <title>Back Office | Home</title>
{% endblock %}

{% block body %}




    <div class="col-lg-3">

        <div class="input-group">
            <input type="text" class="form-control" id="autoSearchHome"
                   data-moussabind="moussajax.moussaHint"
                   data-url="{{ R.url('ajaxAutoCompleteHome',{'context' : 'Intranet',param: {} }) }}"
                   placeholder="Search Event/Work/Artist to highlight"
                   aria-describedby="basic-addon2">
                <span class="input-group-addon" id="basic-addon2"><span class="glyphicon glyphicon-search "
                                                                        aria-hidden="true"></span></span>
        </div>
        <div hei>
            <a href="Home?new">
                <button type="button" id="listWork" class="btn btn-xs right" aria-label="Right Align">
                    <span class="glyphicon glyphicon-list" aria-hidden="true"></span> New
                </button>
            </a>
        </div>
        <div class="list-group" id="list-home" data-moussabind="moussajax.moussaSortable"
             data-url="{{ R.url('ajaxSortHome',{'context' : 'Intranet',param: {} }) }}"
             data-placeholder="ui-state-highlight" data-axis="y" data-item="" data-handle=".poignee">

            {% include "Intranet/Home/Menu.php.twig" with {'entities': homeVal} %}

        </div>

    </div>


    <div class="col-lg-9">

        <div class="row">
            <div class="col-xs-12 col-sm-12">
                <div class="base-box" id="form-box">
                    <h1>HOME</h1>


                    <div class="col-sm-6">
                    {{ R.js('moussajax/moussaSwitch') }}
                    {{ R.js('moussajax/moussaDrop') }}

                        <form id="save-home" data-moussabind="moussajax.moussaForm" data-messageTarget="form-box" data-entity="Home">

                            <input type="hidden" name="homeId" id="homeId" value="{{ selectedItem.homeId }}"/>
                            <input type="hidden" name="h" id="h" value="false"/>
                            <input type="hidden" name="w" id="w" value="false"/>
                            <input type="hidden" name="x" id="x" value="false"/>
                            <input type="hidden" name="y" id="y" value="false"/>
                            <input type="hidden" name="tempMediaId" id="tempMediaId" value="false"/>
                            <input type="hidden" name="recropMediaId" id="recropMediaId" value="false"/>



                            <input type="hidden" name="mobileh"              id="mobileh" value="false"/>
                            <input type="hidden" name="mobilew"              id="mobilew" value="false"/>
                            <input type="hidden" name="mobilex"              id="mobilex" value="false"/>
                            <input type="hidden" name="mobiley"              id="mobiley" value="false"/>
                            <input type="hidden" name="mobiletempMediaId"    id="mobiletempMediaId" value="false"/>
                            <input type="hidden" name="mobilerecropMediaId"  id="mobilerecropMediaId" value="false"/>

                            {#<input type="hidden" name="Entity" id="Entity" value="false"/>#}
                            {#<input type="hidden" name="EntityId" id="EntityId" value="false"/>#}

                            {% include 'Input/hidden.twig'  with {'type':'hidden', 'class': 'form-group', 'label': '', 'idName':'Entity', 'value':selectedItem.entity} %}
                            {% include 'Input/hidden.twig'  with {'type':'hidden', 'class': 'form-group', 'label': '', 'idName':'entityId', 'value':selectedItem.entityId} %}


                            <div class="checkbox">
                                <label></label>

                                <input type="checkbox" name="online" id="online"
                                       data-moussabind="moussajax.moussaSwitch"
                                       id="online" {{ selectedItem.online==1 ? 'checked' : '' }}>


                               {# <input type="checkbox" name="online"
                                       id="online" {{ selectedItem.online==1 ? 'checked' : '' }}>#}

                            </div>


                            <div class="form-group">
                                <label for="exampleInputEmail1">City</label>
                                <input type="text" name="city" id="city" class="form-control" placeholder="City"
                                       value="{{ selectedItem.city }}">
                            </div>

                            <div class="form-group">
                                <label for="exampleInputEmail1">Title</label>
                                <input type="text" name="title" class="form-control" id="title"
                                       placeholder="Title" value="{{ selectedItem.title }}">
                            </div>

                            <div class="form-group">
                                <label for="exampleInputEmail1">SubTitle</label>
                                <input type="text" name="subtitle" class="form-control" id="subtitle"
                                       placeholder="SubTitle" value="{{ selectedItem.subtitle }}">
                            </div>

                            <div class="form-group">


                                <label for="exampleInputEmail1">Begining</label>

                                <div class='input-group date' id='datetimepicker1'>
                                    <input type='text' class="form-control" name="begining" id="begining"  value="{{ selectedItem.begining | date('d/m/Y') }}"/>
                                        <span class="input-group-addon">
                                            <span class="glyphicon glyphicon-calendar"></span>
                                        </span>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="exampleInputEmail1">Ending</label>

                                <div class='input-group date' id='datetimepicker7'>
                                    <input type='text' class="form-control" name="ending" id="ending" value="{{ selectedItem.ending  | date('d/m/Y') }}"/>
                                    <span class="input-group-addon">
                                        <span class="glyphicon glyphicon-calendar"></span>
                                    </span>
                                </div>
                            </div>


                            <script type="text/javascript">
                                $(function () {
                                    $('#datetimepicker1').datetimepicker({format: 'DD/MM/YYYY'});
                                    $('#datetimepicker7').datetimepicker({
                                        format: 'DD/MM/YYYY',
                                        useCurrent: false //Important! See issue #1075
                                    });
                                    $("#datetimepicker1").on("dp.change", function (e) {
                                        $('#datetimepicker7').data("DateTimePicker").minDate(e.date);
                                    });
                                    $("#datetimepicker7").on("dp.change", function (e) {
                                        $('#datetimepicker1').data("DateTimePicker").maxDate(e.date);
                                    });
                                });
                            </script>

                            <br/>
                            {% set arr = {'noir':'Noir', 'blanc':'Blanc' } %}
                            {% include 'Input/radioNice.twig'  with {'class': 'form-group', 'label': 'Text color', 'idName':'textColor', 'value':selectedItem.textColor, 'default':'noir','list':arr, 'classCol':'info' } %}

                            <br/>

                            <div style="text-align: right;">
                                <button type="button" data-ajax-form="save-home" class="btn btn-default btn-success"
                                        aria-label="Left Align">
                                    <span class="glyphicon glyphicon-floppy-save" aria-hidden="true"></span> Save
                                </button>

                                <button type="button" id="previewHome" data-preview-url="{{ R.url('cwgHome',{'context' : 'Web',param: ['preview'] }) }}" class="btn btn-default btn-info"
                                        aria-label="Left Align">
                                    <span class="glyphicon glyphicon-search" aria-hidden="true"></span> Preview
                                </button>

                                <button type="button" id="deleteHome" class="btn btn-default btn-danger"
                                        data-moussabind="moussajax.moussaConfirm"
                                        data-content="Etes-vous sûr de supprimer cette Home <b>{{ selectedItem.title }}</b> ???"
                                        data-title="Supprimer cette home"
                                        data-url="{{ R.url('genericAjaxEntityDelete',{'context' : 'Intranet',param: ['Home', selectedItem.homeId] }) }}"
                                        aria-label="Right Align">
                                <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> Delete
                                </button>

                            </div>

                            <br/>
                        </form>

                    </div>
                    <div class="col-sm-6">

                        {#{% if(media.url is not empty) %}#}
                        {#<label>Image</label>#}
                        {#<div>#}
                        {#<img src="{{ media.url }}" width="80%" style="border: 1px solid gray;"/>#}
                        {#</div>#}
                        {#{% endif %}#}
                    </div>

                    <div class="clear"></div>


                </div>
            </div>
            <div class="col-xs-12 col-sm-12">


                <ul class="nav nav-tabs">
                    <li class="active"><a href="#english" data-toggle="tab">Photo</a></li>
                    <li><a href="#french" data-toggle="tab">Photo (Portrait devices)</a></li>
                </ul>

                <div id='contenttab' class="tab-content">
                    <div class="tab-pane   active" id="english" style="padding: 10px;">





                <div class="base-box" id="base-crop-photo">


                    <div class="spinner" id="spinner-home">
                        <div class="rect1"></div>
                        <div class="rect2"></div>
                        <div class="rect3"></div>
                        <div class="rect4"></div>
                        <div class="rect5"></div>
                    </div>

                    <h4><span class=" label label-info">Drag your photo <span class="badge">Min width/Height : 2500px / 1750px </span>
                    </span></h4>

                    <button type="button" data-action="reloadImage" class="btn btn-default btn-info" aria-label="Left Align">
                        <span class="glyphicon glyphicon-picture" aria-hidden="true"></span> Reload original picture
                    </button>

                    {{ R.js('moussajax/moussaCrop') }}
                    {{ R.js('moussajax/moussaDropnCrop') }}




                    <div class="drag-zone border-dashed" data-moussabind="moussajax.moussaDropnCrop"
                         data-url="{{ R.url('ajaxSaveDropImage',{'context' : 'Intranet'}) }}"
                         data-getinject="homeId" data-imageMask="medias/home-crop-mask.png" data-entity="Home" >




                        <img style=";width: 878px " src="{{ media.url }}" id='' class="cropimg imgToCrop" data-media-id="{{ media.mediaId }}"  data-parent-id="{{ media.parentId }}" />


                    </div>

                    <p class="text-danger"></p>
                </div>


                        {% set mobileMedia = selectedItem.getOneMobileMedia() %}

                    </div>
                    <div class="tab-pane " id="french" style="padding: 10px;">
                        <div class="base-box" id="base-crop-photo">


                            <div class="spinner" id="spinner-home">
                                <div class="rect1"></div>
                                <div class="rect2"></div>
                                <div class="rect3"></div>
                                <div class="rect4"></div>
                                <div class="rect5"></div>
                            </div>

                            <h4><span class=" label label-info">Drag your photo <span class="badge">Min width/Height : 1000px / 1800px </span>
                    </span></h4>


                            {{ R.js('moussajax/moussaCrop') }}
                            {{ R.js('moussajax/moussaDropnCrop') }}




                            <div style="width:416px;">
                            <button type="button" data-action="reloadImage" class="btn btn-default btn-info" aria-label="Left Align">
                                <span class="glyphicon glyphicon-picture" aria-hidden="true"></span> Reload original picture
                            </button>
                            <div class="drag-zone border-dashed" data-moussabind="moussajax.moussaDropnCrop"
                                 data-url="{{ R.url('ajaxSaveDropImage',{'context' : 'Intranet'}) }}"
                                 data-getinject="homeId"
                                 data-inputPrefix="mobile"
                                 data-resultratio="1.8"
                                    {#data-imageMask="medias/home-crop-mask.png"#}
                                 data-entity="Home" >




                                <img  style="width:400px;" src="{{ mobileMedia.url }}" id='' class="cropimg imgToCrop" data-media-id="{{ mobileMedia.mediaId}}"  data-parent-id="{{mobileMedia.parentId }}" />


                            </div>
                            </div>

                            <p class="text-danger"></p>
                        </div>
                    </div>

                </div>













            </div>
        </div>
    </div>
    </div>
    {{ R.js('helpers')        }}
    {{ R.js('vendor/*') }}
    {{ R.js('moussajax/moussaForm') }}
    {{ R.js('moussajax/moussaModal') }}
    {{ R.js('moussajax/moussaConfirm') }}
    {{ R.js('moussajax/moussaSortable') }}
    {{ R.js('moussajax/moussaHint') }}
    {{ R.css('moussajax/moussaModal') }}

    {{ R.css('vendor/funckyRadio') }}
    <link rel="stylesheet" href="/csi/css/vendor/funckyRadio.css" />


    <link rel="stylesheet" type="text/css" href="/admin/css/cropit/cropimg.css" media="all"/>


{% endblock %}