{extends file="admin-layout.tpl"}

{block name="no-return-functions"}
    {$admin_current_location = 'configuration'}
{/block}

{block name="page-title"}{intl l='Carousel Edit'}{/block}

{block name="check-resource"}admin.configuration.menu{/block}
{block name="check-access"}update{/block}

{block name="main-content"}

<div class="taxes-rules edit-taxes-rules">
    <div id="wrapper" class="container">
		<ul class="breadcrumb">
			<li><a href="{url path='/admin/home'}">{intl l="Home"}</a></li>
			<li><a href="{url path='/admin/tools'}">{intl l="Outils"}</a></li>
			<li><a href="{url path='/admin/module/carouselv2/list'}">{intl l="Carousel"}</a></li>
			<li>{intl l="Détails"}</li>
		</ul>
{loop name="carouselv2.general" type="carouselv2" carousel={$carousel_id} backend_context="1" lang="$edit_language_id"}
<div class="general-block-decorator">
    <div class="row">
        <div class="col-md-12 title title-without-tabs">
            {intl l='Information général du carousel' d='carouselv2.bo.default'}
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="form-container">
				{form name="carouselv2.general"}
                    <form method="POST" action="{url path="/admin/module/carouselv2/update"}" {form_enctype} class="clearfix">

                        {include
                            file = "includes/inner-form-toolbar.html"
                            page_url   = "{url path='/admin/module/Carousel'}"
                            close_url  = "{url path='/admin/modules'}"
                        }
                        {form_hidden_fields carousel_id=$carousel_id}					
						
						{render_form_field field="carousel_id" value=$carousel_id}
						<div class="row">
							<div class="col-md-4">
								{render_form_field field="title" value=$TITLE}
							</div>
							{if $updateChapo}
							<div class="col-md-8">
								{render_form_field field="chapo" value=$CHAPO}
							</div>
							{/if}
							{if $updateDescription}
							<div class="col-md-8">
								{render_form_field field="description" value=$DESCRIPTION extra_class="wysiwyg" }
							</div>
							{/if}
							{if $updatePostscriptum}
							<div class="col-md-4">
								{render_form_field field="postscriptum" value=$POSCRIPTUM}
							</div>
							{/if}
							{if $updateSize}
							<div class="col-md-4">
								{render_form_field field="resizemode" value=$RESIZEMODE}
							</div>
							<div class="col-md-4">
								{render_form_field field="width" value=$WIDTH}
							</div>
							<div class="col-md-4">
								{render_form_field field="height" value=$HEIGHT}
							</div>
							{/if}
							<div class="col-md-4">
								{render_form_field field="visible" value=$VISIBLE}
							</div>
							{if $updateNavigation}
							<div class="col-md-4">
								{render_form_field field="navigationcircle" value=$NAVIGATIONCIRCLE}
							</div>
							<div class="col-md-4">
								{render_form_field field="navigationarrow" value=$NAVIGATIONARROW}
							</div>
							{/if}
							{if $updateEffetdelay}
							<div class="col-md-6">
								{render_form_field field="delay" value=$DELAY}
							</div>
							<div class="col-md-6">
								{render_form_field field="effet" value=$EFFET}
							</div>
							{/if}
						</div>
							{render_form_field field="hookhomebody" value=$afficheaccueil }
							
						<div class="row">
							<div class="col-md-4">
								<select name="carouselv2_general[source]" id="source" class="form-control" >
									<option value="">Source</option>
									<option value="0"{if $SOURCE == 0} selected{/if}>Catégorie</option>
									<option value="1"{if $SOURCE == 1} selected{/if}>Produit</option>
									<option value="2"{if $SOURCE == 2} selected{/if}>Dossier</option>
									<option value="3"{if $SOURCE == 3} selected{/if}>Contenu</option>
									<option value="4"{if $SOURCE == 4} selected{/if}>Marque</option>
								</select>
							</div>
							<div class="col-md-4">
								<select name="carouselv2_general[source_id]" id="source_id" class="form-control" data-value="{$SOURCE_ID}">
								</select>
							</div>
						</div>
						
                        {include
                            file = "includes/inner-form-toolbar.html"
                            page_url   = "{url path='/admin/module/Carousel'}"
                            close_url  = "{url path='/admin/modules'}"
                            page_bottom = true
                        }
                    </form>
                {/form}
			</div>
		</div>
	</div>
</div>
		{/loop}

<div class="general-block-decorator">
    <div class="row">
        <div class="col-md-12 title title-without-tabs">
            {intl l='Edit your carousel.' d='carouselv2.bo.default'}
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="form-container">
                {form name="carouselv2.image"}
                    <form method="POST" action="{url path="/admin/module/carouselv2/upload"}" {form_enctype} class="clearfix">

                        {form_hidden_fields}

						<input type="hidden" name="carousel_id" value="{$carousel_id}">
						
                        {form_field field='file'}
                            <div class="form-group {if $error}has-error{/if}">
                                <label for="{$label_attr.for}" class="control-label">{intl d='carouselv2.bo.default' l='Add an image to the carousel'}</label>
                                <div class="input-group">
                                    <input type="file" id="{$label_attr.for}" {if $required}required="required"{/if} name="{$name}" value="{$value}" title="{intl l='Carousel image' d='carouselv2.bo.default'}" placeholder="{intl l='Carousel image' d='carouselv2.bo.default'}" class="form-control">
                                    <span class="input-group-btn">
                                        <input type="submit" class="form-submit-button btn btn-sm btn-success" value="{intl d='carouselv2.bo.default' l='Add this image to the carousel'}" >
                                    </span>
                                </div>
                            </div>
                        {/form_field}
                    </form>
                {/form}
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12 title title-without-tabs">
            {intl l='Carousel images' d='carouselv2.bo.default'}
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="form-container">
                {ifloop rel="carouselv2.item"}
                    {form name="carouselv2.update"}
                    <form method="post" action="{url path="/admin/module/carouselv2/item/update"}" {form_enctype} class="clearfix">
						<input type="hidden" name="carousel_id" value="{$carousel_id}" >
                        {include
                            file = "includes/inner-form-toolbar.html"
                            page_url   = "{url path="/admin/module/carouselv2/edit/{$carousel_id}"}"
                            close_url  = "{url path='/admin/module/carouselv2/list'}"
                        }

                        {form_hidden_fields}

                        {loop name="carouselv2.item" type="carouselv2items" carousel={$carousel_id} width="550" height="200" resize_mode="borders"  backend_context="1" lang="$edit_language_id" filter_disable_slides=false}
						{$iditem=$ID}
                        <div class="well well-sm">
                            <div class="row">
                                <div class="col-md-6">
                                    <p>
                                        <a href="{$ORIGINAL_IMAGE_URL}" class="thumbnail" target="_blank">
                                            <img src="{$IMAGE_URL}" alt="{$ALT}">
                                        </a>
                                    </p>
									{render_form_field field="alt{$ID}" value=$ALT}
                                    <div class="btn-group">
                                        <a class="btn btn-default btn-sm bloc-delete" href="#delete_carousel_dialog" data-toggle="modal" data-id="{$ID}">
                                            <i class="glyphicon glyphicon-trash"></i> {intl d='carouselv2.bo.default' l='Supprimer ce bloc'}
                                        </a>
                                    </div>

                                    <div class="pull-right row" style="width:170px">
                                        <div class="col-xs-5" style="padding-top:5px">
                                            <label for="position{$ID}">{intl d='carouselv2.bo.default' l='Position'}:</label>
                                        </div>
                                        <div class="col-xs-7">
                                            {form_field field="position{$ID}"}
                                                <input id="position{$ID}" class="form-control" type="number" min="1" name="{$name}" value={$POSITION}>
                                            {/form_field}
                                        </div>
                                    </div>
                                    <div style="padding-top: 10px">
                                        <div class="row col-md-12">
                                            {form_field field="disable{$ID}"}
												<label for="disable{$ID}" class="checkbox">
                                                <input id="disable{$ID}" type="checkbox" name="{$name}" {if $DISABLE}checked{/if}>
                                                {$label}</label>
                                            {/form_field}
                                        </div>

                                    {if $choiceposition}
										<strong>Position du texte et média sur ordinateur</strong>
										<div class="row">
											<div class="col-md-12">Position du texte</div>
                                            {form_field field="positiontextvisuel{$ID}"}
												{loop type="carouselv2options" name="positiondesktop" source="4" visible=1}

												{if file_exists("{$smarty.current_dir}/assets/img/positiontextmedia{$VALUE}.jpg")}
												<label for="positiontextvisuel{$VALUE}{$iditem}" class="radio col-md-4 " style="margin-top:15px;">
                                                <input id="positiontextvisuel{$VALUE}{$iditem}" type="radio" name="{$name}" value="{$VALUE}"{if "{$POSITIONTEXT}{$POSITIONVISUEL}" == {$VALUE}}checked{/if}>
												
                                                <img src="{image file="assets/img/positiontextmedia{$VALUE}.jpg" source="Carouselv2"}" alt="{$TITLE}" class="img-fluid img-responsive">
												</label>
												{else}
												<div class="radio col-md-4 "  style="margin-top:15px;">
													<input id="positiontextvisuel{$VALUE}{$iditem}" type="radio" name="{$name}" value="{$VALUE}"{if "{$POSITIONTEXT}{$POSITIONVISUEL}" == {$VALUE}}checked{/if}>
													<label for="positiontextvisuel{$VALUE}{$iditem}" >	
														{$TITLE}
													</label>
												</div>
												{/if}
												{/loop}
                                            {/form_field}
                                        </div>
										
										<hr>
                                        <div class="row">
											<strong class="col-md-12">Position sur mobile</strong>
                                            {form_field field="positionmobile{$ID}"}
												{loop type="carouselv2options" name="positionmobile" source="5" visible=1}
												{if file_exists("{$smarty.current_dir}/assets/img/mobile{$VALUE}.jpg")}
												<label for="positionmobile{$VALUE}{$iditem}" class="radio col-md-4 " style="margin-top:15px;">
                                                <input id="positionmobile{$VALUE}{$iditem}" type="radio" name="{$name}" value="{$VALUE}"{if $POSITIONMOBILE == {$VALUE}}checked{/if}>
                                                <img src="{image file="assets/img/mobile{$VALUE}.jpg" source="Carouselv2"}" alt="{$TITLE}" width="80"></label>
												{else}
												<div class="radio col-md-4 "  style="margin-top:15px;">
													<input id="positionmobile{$VALUE}{$iditem}" type="radio" name="{$name}" value="{$VALUE}"{if $POSITIONMOBILE == {$VALUE}}checked{/if}>
													<label for="positionmobile{$VALUE}{$iditem}" >	
														{$TITLE}
													</label>
												</div>
												{/if}
												{/loop}
                                            {/form_field}
                                        </div>
										{/if}
                                    {if $choicedate}
                                        <div class="row col-md-12">
                                            {form_field field="limited{$ID}"}
												<label for="limited{$ID}" class="checkbox">
                                                <input id="limited{$ID}" type="checkbox" name="{$name}" {if $LIMITED}checked{/if}>
                                                {$label}</label>
                                            {/form_field}
                                        </div>

                                        <div class="row col-md-6">
                                            {form_field field="start_date{$ID}"}
                                                <label class="row col-md-12" for="{$name}">{$label}</label>
                                                <div class="col-md-10" style="padding: 0">
                                                    <input name="{$name}"
                                                           placeholder="{intl l='YYYY-MM-DD' d='carouselv2.bo.default'}"
                                                           id="start_date{$ID}"
                                                           type="datetime-local"
                                                           class="form-control datetime-picker"
                                                           value="{$START_DATE}"/>
                                                </div>
                                            {/form_field}
                                        </div>

                                        <div class="row col-md-6">
                                            {form_field field="end_date{$ID}"}
                                                <label class="row col-md-12" for="{$name}">{$label}</label>
                                                <div class="col-md-10" style="padding: 0">
                                                    <input name="{$name}"
                                                           placeholder="{intl l='YYYY-MM-DD' d='carouselv2.bo.default'}"
                                                           id="end_date{$ID}"
                                                           type="datetime-local"
                                                           class="form-control datetime-picker"
                                                           value="{$END_DATE}"/>
                                                </div>
                                            {/form_field}
                                        </div>
										{/if}
                                    </div>
                                </div>

                                <div class="col-md-6">

                                    
                                    {if $addtitle}
	                                    {render_form_field field="title{$ID}" value=$TITLE}
									{/if}
                                    {if $addchapo}
										{render_form_field field="chapo{$ID}" value=$CHAPO}
                                    {/if}
                                    {if $adddescription}
                                    {render_form_field field="description{$ID}" extra_class="wysiwyg" value=$DESCRIPTION}
									{/if}
                                    {if $choicecolor}
									<strong>{intl l='Texte sur ordinateur' d='carouselv2.bo.default' }</strong>
									<div class="row">
									{form_field field="classfont{$ID}"}
										<div class="form-group {if $error}has-error{/if} col-md-4">
											<label for="{$label_attr.for}" class="control-label">{intl d='carouselv2.bo.default' l='Couleur du texte'}</label>
											<select name="{$name}" class="form-control">
												<option></option>
												{loop type="carouselv2options" name="color" source="1" visible=1}
												<option value="{$VALUE}" {*class="{$VALUE}"*}{if $CLASSFONT == $VALUE} selected{/if}>{$TITLE}</option>
												{/loop}
											</select>
										</div>
									{/form_field}
									
									{form_field field="classbackground{$ID}"}
										<div class="form-group {if $error}has-error{/if}  col-md-4">
											<label for="{$label_attr.for}" class="control-label">{intl d='carouselv2.bo.default' l='Couleur du fond'}</label>
											<select name="{$name}" class="form-control">
												<option></option>
												{loop type="carouselv2options" name="background" source="2" visible=1}
												<option value="{$VALUE}" {*class="{$VALUE}"*}{if $CLASSBACKGROUND == $VALUE} selected{/if}>{$TITLE}</option>
												{/loop}
											</select>
										</div>
									{/form_field}
									{form_field field="classtext{$ID}"}
										<div class="form-group {if $error}has-error{/if}  col-md-4">
											<label for="{$label_attr.for}" class="control-label">{intl d='carouselv2.bo.default' l='Alignement du texte'}</label>
											<select name="{$name}" class="form-control">
												<option></option>
												{loop type="carouselv2options" name="alignement" source="3" visible=1}
												<option value="{$VALUE}" {*class="{$VALUE}"*}{if $CLASSTEXT == $VALUE} selected{/if}>{$TITLE}</option>
												{/loop}
											</select>
										</div>
									{/form_field}
									</div>
									
									<strong>{intl l='Texte sur mobile' d='carouselv2.bo.default' }</strong>
									<div class="row">
									{form_field field="classfontmobile{$ID}"}
										<div class="form-group {if $error}has-error{/if} col-md-4">
											<label for="{$label_attr.for}" class="control-label">{intl d='carouselv2.bo.default' l='Couleur du texte'}</label>
											<select name="{$name}" class="form-control">
												<option></option>
												{loop type="carouselv2options" name="colormobile" source="1" visible=1}
												<option value="{$VALUE}" {*class="{$VALUE}"*}{if $CLASSFONTMOBILE == $VALUE} selected{/if}>{$TITLE}</option>
												{/loop}
											</select>
										</div>
									{/form_field}
									
									{form_field field="classbackgroundmobile{$ID}"}
										<div class="form-group {if $error}has-error{/if}  col-md-4">
											<label for="{$label_attr.for}" class="control-label">{intl d='carouselv2.bo.default' l='Couleur du fond'}</label>
											<select name="{$name}" class="form-control">
												<option></option>
												{loop type="carouselv2options" name="backgroundmobile" source="2" visible=1}
												<option value="{$VALUE}" {*class="{$VALUE}"*}{if $CLASSBACKGROUNDMOBILE == $VALUE} selected{/if}>{$TITLE}</option>
												{/loop}
											</select>
										</div>
									{/form_field}
									{form_field field="classtextmobile{$ID}"}
										<div class="form-group {if $error}has-error{/if}  col-md-4">
											<label for="{$label_attr.for}" class="control-label">{intl d='carouselv2.bo.default' l='Alignement du texte'}</label>
											<select name="{$name}" class="form-control">
												<option></option>
												{loop type="carouselv2options" name="alignementmobile" source="3" visible=1}
												<option value="{$VALUE}" {*class="{$VALUE}"*}{if $CLASSTEXTMOBILE == $VALUE} selected{/if}>{$TITLE}</option>
												{/loop}
											</select>
										</div>
									{/form_field}
									</div>
									{/if}
                                    {if $addpostscriptum}
									{render_form_field field="postscriptum{$ID}" value=$POSTSCRIPTUM}
									{/if}
                                    {if $addbtn}
									{render_form_field field="title_btn{$ID}" value=$TITLE_BTN}
									{render_form_field field="url{$ID}" value=$URL}
									{/if}

                                    {* 
									{render_form_field field="group{$ID}" value=$GROUP}
                                    
                                    *}
									
									
									{form_field field="file{$ID}"}
										<div class="form-group {if $error}has-error{/if}">
											<label for="{$label_attr.for}" class="control-label">{intl d='carouselv2.bo.default' l='Remplacer l\'image par une autre image'}</label>
											<div class="input-group">
												<input type="file" id="{$label_attr.for}" name="{$name}" value="{$value}" title="{intl l='Carousel image' d='carouselv2.bo.default'}" placeholder="{intl l='Carousel image' d='carouselv2.bo.default'}" class="form-control">
											</div>
										</div>
									{/form_field}

                                    {if $addvideo}
									{form_field field="filevideo{$ID}"}
										<div class="form-group {if $error}has-error{/if}">
											<label for="{$label_attr.for}" class="control-label">{intl d='carouselv2.bo.default' l='Afficher une vidéo'}</label>
											<div class="row">
											<div class="col-md-6">
												<input type="file" id="{$label_attr.for}" name="{$name}" value="{$value}" title="{intl l='Fichier vidéo' d='carouselv2.bo.default'}" placeholder="{intl l='fichier vidéo' d='carouselv2.bo.default'}" class="form-control">
											</div>
											{if $VIDEO_URL}
											<div class="col-md-6"><a class="btn btn-danger btn-sm video-delete" href="#delete_video_dialog" data-toggle="modal" data-id="{$ID}">
                                            <i class="glyphicon glyphicon-trash"></i> {intl d='carouselv2.bo.default' l='Supprimer cette vidéo'}
                                        </a></div>
											{/if}
												</div>
										</div>
									{/form_field}
									{if $VIDEO_URL}
										<video src="{$VIDEO_URL}" controls class="img-responsive img-fluide"></video>
									
										
                                        <div class="row">
                                            {form_field field="video_controls{$ID}"}
											<div class="col-md-3">
												<label for="video_controls{$ID}" class="checkbox">
                                                <input id="video_controls{$ID}" type="checkbox" name="{$name}" value="1" {if $VIDEO_CONTROLS}checked{/if}>
                                                {$label}</label>
											</div>
                                            {/form_field}
                                            {form_field field="video_autoplay{$ID}"}
											<div class="col-md-3">
												<label for="video_autoplay{$ID}" class="checkbox">
                                                <input id="video_autoplay{$ID}" type="checkbox" name="{$name}" value="1" {if $VIDEO_AUTOPLAY}checked{/if}>
                                                {$label}</label>
											</div>
                                            {/form_field}
                                            {form_field field="video_loop{$ID}"}
											<div class="col-md-3">
												<label for="video_loop{$ID}" class="checkbox">
                                                <input id="video_loop{$ID}" type="checkbox" name="{$name}" value="1" {if $VIDEO_LOOP}checked{/if}>
                                                {$label}</label>
											</div>
                                            {/form_field}
                                            {form_field field="video_muted{$ID}"}
											<div class="col-md-3">
												<label for="video_muted{$ID}" class="checkbox">
                                                <input id="video_muted{$ID}" type="checkbox" name="{$name}" value="1" {if $VIDEO_MUTED}checked{/if}>
                                                {$label}</label>
											</div>
                                            {/form_field}
                                        </div>
									
									{/if}
									{/if}
                                </div>
                            </div>
                        </div>
                        {/loop}

                        {include
                            file = "includes/inner-form-toolbar.html"
                            page_url   = "{url path='/admin/module/Carousel'}"
                            close_url  = "{url path='/admin/modules'}"
                            page_bottom = true
                        }
                    </form>
                    {/form}
                {/ifloop}

                {elseloop rel="carouselv2.item"}
                    <div class="alert alert-info">
                        {intl d='carouselv2.bo.default' l="Your carousel contains no image. Please add one using the form above."}
                    </div>
                {/elseloop}
            </div>
        </div>
    </div>
</div>


</div>
</div>

{capture "delete_dialog"}
    <input type="hidden" name="carousel_item_id" id="carousel_delete_item_id" value="" />
{/capture}

{include
file = "includes/generic-confirm-dialog.html"

dialog_id       = "delete_carousel_dialog"
dialog_title    = {intl l="Delete a carousel image" d="carouselv2.bo.default"}
dialog_message  = {intl l="Do you really want to remove this image from the carousel ?" d="carouselv2.bo.default"}

form_action         = {url path='/admin/module/carouselv2/item/delete'}
form_content        = {$smarty.capture.delete_dialog nofilter}
}

{capture "video_delete_item"}
    <input type="hidden" name="video_item_id" id="video_delete_item_id" value="" />
{/capture}

{include
file = "includes/generic-confirm-dialog.html"

dialog_id       = "delete_video_dialog"
dialog_title    = {intl l="Delete a carousel image" d="carouselv2.bo.default"}
dialog_message  = {intl l="Voulez-vous vraiement enlever cette vidéo" d="carouselv2.bo.default"}

form_action         = {url path='/admin/module/carouselv2/item/delete'}
form_content        = {$smarty.capture.video_delete_item nofilter}
}

{/block}

{block name="javascript-initialization"}
	<script>
		$('.bloc-delete').click(function(){
			$('#carousel_delete_item_id').val($(this).data('id'));
		});
		$('.video-delete').click(function(){
			$('#video_delete_item_id').val($(this).data('id'));
		});
		
		$('#source').change(function(){
			var sourceid = $('#source_id').val();
			if(!sourceid)sourceid = $('#source_id').data('value');
			$.ajax({
			  url: "{url path="/admin/module/carouselv2/ajax/source"}",
			  data:{ 'source':$('#source').val(),'source_id':sourceid, 'carousel_id': {$carousel_id}}
			}).done(function(reponse) {
			  $( '#source_id' ).html( reponse );
			});

		});
		
		var sourceid = $('#source_id').val();
		if(!sourceid)sourceid = $('#source_id').data('value');
		$.ajax({
		  url: "{url path="/admin/module/carouselv2/ajax/source"}",
		  data:{ 'source':$('#source').val(),'source_id':sourceid, 'carousel_id': {$carousel_id}}
		}).done(function(reponse) {
		  $( '#source_id' ).html( reponse );
		});


		$('#source').val()
		
	</script>
{/block}

{block name="javascript-last-call"}
	{hook name="wysiwyg.js" }
{/block}