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

{% block body %}

    {{ R.js('moussajax/moussaSwitch') }}

    <script src="js/ckeditor/ckeditor.js"></script>


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

        <div class="input-group">
            <input type="text" class="form-control" id="autoSearchHome"
                   placeholder="Search Fair"
                   aria-describedby="basic-addon2">
                <span class="input-group-addon" id="basic-addon2"><span class="glyphicon glyphicon-search "
                                                                        aria-hidden="true"></span></span>
        </div>

        <div class="list-group">

            {% for val in listFairs %}
                <a href="Fair?{{ val.eventId }}" id=""
                   class="list-group-item {{ val.onlineCwg==0 ? 'bg-stripped' : '' }} {{ fair.eventId==val.eventId ? 'active' : '' }} ">{{ val.name() }}
                    ({{ val.location }})</a>
            {% endfor %}

        </div>

    </div>



    <form id="form-edit-fair" data-moussabind="moussajax.moussaForm"
          data-entity="Event"

          {#data-url="{{ R.url('ajaxSaveEditFair',{'context' : 'Intranet',param: {} }) }}"#}
    >

    <input type="hidden" name="eventId" id="eventId" value="{{ fair.eventId }}"/>
    <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="type" id="type" value="fair"/>


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

    <div class="row">
    <div class="col-xs-7 col-sm-7">
        <div class="base-box">
            <h1>{{ fair.name() }}
                <div style="float:right;">
                    <a href="Fair?{{ fair.eventId }}">
                        <button type="button" id="listWork" class="btn btn-xs right" aria-label="Right Align">
                            <span class="glyphicon glyphicon-list" aria-hidden="true"></span> List of works
                        </button>
                    </a></div>
            </h1>

            <br/>

            <div class="form-group dimensions">
                <div class="labeled">&nbsp;</div>

                <div class="inline">
                    <div class="inline bolded">
                        <div class="inline100">CWG</div>
                        <div class="inline100">Artbinder</div>
                    </div>
                    <br/>


                    <div class="inline">

                        <div class="inline100"><input type="checkbox" name="onlineCwg" id="onlineCwg"
                                                      data="onlineCwg"
                                                      data-moussabind="moussajax.moussaSwitch"
                                                      data-field="fair.onlineCwg"
                                                      id="onlineCwg" {{ fair.onlineCwg==1 ? 'checked' : '' }}>
                        </div>


                        <div class="inline100"><input type="checkbox" name="onlineArtbinder" id="onlineArtbinder"
                                                      data="onlineArtbinder"
                                                      data-moussabind="moussajax.moussaSwitch"
                                                      data-field="fair.onlineArtbinder"
                                                      id="onlineArtbinder" {{ fair.onlineArtbinder==1 ? 'checked' : '' }}>
                        </div>


                    </div>
                </div>


            </div>



            {% include 'Input/simple.twig'  with {'type':'text', 'class': 'form-group', 'label': 'Name', 'idName':'name', 'value':fair.name} %}

            {% include 'Input/simple.twig'  with {'type':'text', 'class': 'form-group', 'label': 'City', 'idName':'city', 'value':fair.city} %}

            {% include 'Input/simple.twig'  with {'type':'text', 'class': 'form-group', 'label': 'Location', 'idName':'location', 'value':fair.location} %}


            <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="{{ fair.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="{{ fair.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/>

            <div style="text-align: right;">
                <button type="button" id="saveFair" data-ajax-form="form-edit-fair"
                        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="deleteEvent" class="btn btn-default btn-danger"
                        data-moussabind="moussajax.moussaConfirm"
                        data-content="Etes-vous sûr de supprimer cette expo <b>{{ selectedItem.name }}</b> ???"
                        data-title="Delete this Fair"
                        data-url="{{ R.url('genericAjaxEntityDelete',{'context' : 'Intranet',param: ['Event', fair.eventId] }) }}"

                        aria-label="Right Align">
                    <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> Delete
                </button>
            </div>
            <br/>


        </div>

        <br/>

        <div class="base-box">
            <h1>ABOUT</h1>

            {% include 'Input/ckeditor.twig'  with {'type':'text', 'class': 'form-group', 'label': 'About', 'idName':'about', 'value':fair.about } %}


        </div>


        <script>
            CKEDITOR.inline('about');

        </script>

        <br/>


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





        <div class="base-box firstPhoto">

            <h1>FIRST PHOTO</h1>


            <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>

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

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

            {% include 'MoussaModule/Stepso2o.php.twig' with { 'Entity':'Event', 'EntityId': fair.eventId,'prefix':'ustepMediaId','o2o':1 } %}


            {#<div class="drag-zone border-dashed" data-moussabind="moussajax.moussaDropnCrop"#}
                 {#data-url="{{ R.url('ajaxSaveDropImage',{'context' : 'Intranet'}) }}"#}
                 {#data-getinject="eventId" data-entity="Event"#}
                 {#data-resultratio="1"#}
                 {#&#123;&#35;data-resultWidth="1350"&#35;&#125;#}
                 {#&#123;&#35;data-resultHeight="1350"&#35;&#125;#}
            {#>#}


                {#<img src="{{ fair.getFirstPhoto().getUrl() }}"#}
                     {#data-media-id="{{ fair.getFirstPhoto().getMediaId }}"#}
                     {#data-parent-id="{{ fair.getFirstPhoto().parentId() }}"#}
                     {#style="max-width: 100%" id='imgToCrop-'#}
                     {#class="cropimg imgToCrop"/>#}


            {#</div>#}


            {#  <div style="height:350px;" data-moussabind="moussajax.moussaDropnCrop"
                   data-url="{{ R.url('ajaxSaveDropImage',{'context' : 'Intranet'}) }}"
                   data-getinject="eventId" data-entity="Event" data-resultWidth="300" data-resultHeight="200"
                   class="border-dashed">
                  <img src="{{ exhibition.getFirstPhoto().getUrl() }}" style="max-width: 100%">
              </div>#}

            <h4><span class=" label label-info">Drag your photo <span class="badge">1350px X 1350px</span>
                    </span></h4>


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


        </div>







        {#<div class="base-box">#}

            {#<h1>FIRST PHOTO</h1>#}

            {#<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>#}

            {#<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/moussaDrop') }}#}
            {#{{ 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="eventId"  data-entity="Event"   >#}




                {#&#123;&#35;<img style=";width: 400px " src="{{ media.url }}" id='imgToCrop' class="cropimg" />&#35;&#125;#}
                {#<img src="{{ fair.getFirstPhoto().getUrl() }}" style="max-width: 100%" id='' class="cropimg imgToCrop" />#}


            {#</div>#}



          {#&#123;&#35;  <div style="height:350px;" data-moussabind="moussajax.moussaDropnCrop"#}
                 {#data-url="{{ R.url('ajaxSaveDropImage',{'context' : 'Intranet'}) }}"#}
                 {#data-getinject="eventId" data-entity="Event" data-resultWidth="300" data-resultHeight="200"#}
                 {#class="border-dashed">#}
                {#<img src="{{ fair.getFirstPhoto().getUrl() }}" style="max-width: 100%">#}
            {#</div>&#35;&#125;#}

            {#<h4><span class=" label label-info">Drag your photo <span class="badge">1350px X 920px</span>#}
                    {#</span></h4>#}


            {#<p class="text-danger"></p>#}


        {#</div>#}
        <br/>

        <div class="base-box">
            <h1>PHOTO/VIDEO <i>(BOOTH VIEWS)</i></h1>


            {% include 'MoussaModule/Steps.php.twig' with { 'Entity':'Event', 'EntityId': fair.eventId,'prefix':'steps' } %}


            {#<div id="drop-photo-video" style="height:50px;"#}
                 {#data-moussabind="moussajax.moussaDrop"#}
                 {#data-url="{{ R.url('ajaxSaveDropImage',{'context' : 'Intranet'}) }}"#}
                 {#data-getinject="eventId"#}
                 {#data-entity="Event"#}
                 {#data-autoSave class="border-dashed">#}
                {#Drop image#}
            {#</div>#}




            {#<div class="drag-zone">#}

                {#<img style="display: none;width: 878px " src="{{ media.url }}" id=''#}
                     {#class="cropimg imgToCrop imgToCropArtist"/>#}


            {#</div>#}

            {#<p class="text-danger"></p>#}


            {#<div id="sortFairPhotos" data-url="{{  R.url('rellIndexAjax') }}"#}
                 {#data-moussabind="moussajax.moussaSortable"#}
                 {#data-messageTarget="list-works-box"#}
                 {#data-placeholder="ui-state-highlight-box"#}
                 {#data-item="" data-handle=".drag"#}
                 {#data-ent1="Event"#}
                 {#data-ent2="Media"#}
                 {#data-ent1id="{{ fair.eventId  }}">#}

                {#{% include '/Intranet/FairAjax/ajaxLoadFairPhotoVideo.php.twig' %}#}

            {#</div>#}
        </div>

        <br/>

        <div class="base-box">
            <h1>PDF DOCUMENTS</h1>

            <img style="width: 30px " src="medias/pdf-icon.png" id='imgToCropArtist' class="cropimg imgToCrop imgToCropArtist"/>
        </div>
        <br/>

    </div>
    </div>

    <div class="row">

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

            <div class="base-box" id="list-works-box">
                {{ R.js('moussajax/moussaHint') }}
                <h1>WORKS
                    <div class="input-group searchWorks">
                        <input type="text" class="form-control"
                               id="autoSearchWorks"
                               placeholder="Search Work to add"
                               data-moussabind="moussajax.moussaHint"
                               data-url="{{ R.url('ajaxHintWork',{'param': [fair.eventId]}) }}"
                               data-urlaction="{{ R.url('ajaxHintWorkAddWork',{'param': [fair.eventId]}) }}"
                               aria-describedby="basic-addon2">
                <span class="input-group-addon" id="basic-addon2"><span class="glyphicon glyphicon-search "
                                                                        aria-hidden="true"></span></span>
                    </div>
                </h1>
                <div class="drag-zone">

                    <div id="sortFairWorks" data-url="{{ R.url('rellIndexAjax') }}"
                         data-moussabind="moussajax.moussaSortable"
                         data-messageTarget="list-works-box" data-placeholder="ui-state-highlight-box"
                         data-item=""
                         data-handle=".drag" data-ent1="Event" data-ent2="Work"
                         data-ent1id="{{ fair.eventId }}">
                        {% include '/Intranet/FairAjax/ajaxHintWorkToFair.php.twig' %}

                    </div>
                </div>
            </div>


        </div>
    </div>
    </form>


    {{ R.js('helpers') }}
    {{ R.js('vendor/*') }}

    {{ R.js('moussajax/moussaSortable') }}
    {{ R.js('moussajax/moussaForm') }}
    {{ R.js('moussajax/moussaModal') }}
    {{ R.js('moussajax/moussaConfirm') }}
    {{ R.css('moussajax/moussaModal') }}

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


{% endblock %}