<!-- MENU NAVBAR HEADER-->
<?php echo Modules::run('menuadmin/menubyactive',2);?>
<!-- /MENU NAVBAR HEADER -->

<section id="middle">


    <!-- page title -->
    <header id="page-header">
        <h1>Slider</h1>
        <ol class="breadcrumb">
            <li><a href="#">Slider</a></li>
            <li class="active">Add/Edit</li>
        </ol>
    </header>
    <!-- /page title -->


    <div id="content" class="padding-20">

        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-heading panel-heading-transparent">
                        <strong>Add/Edit Slider</strong>

                    </div>

                    <div class="panel-body">

                        <form class="validate" id="sliderform" action="<?php echo base_url()?>slider/add" method="post" enctype="multipart/form-data" data-success="Sent! Thank you!" data-toastr-position="top-right">

                            <fieldset>
                                <!-- required [php action request] -->
                                <input type="hidden" name="id" value="<?php echo @$item->id?>" />

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

                                        <div class=" row">
                                            <div class="form-group">
                                                <div class="col-md-6 col-sm-6">
                                                    <div class="alert alert-bordered-dotted" >
                                                        <label>
                                                            Background Image
                                                        </label>

                                                        <figure class="margin-bottom-10"><!-- image -->
                                                            <img id="BG_image" class="img-responsive" src="<?php echo img_check(base_url().IMAGE_PATH.@$item->bg_image)?>" alt="" />
                                                        </figure><!-- /image -->

                                                    </div>

                                                    <!-- custom file upload -->
                                                    <div class="fancy-file-upload fancy-file-primary">
                                                        <i class="fa fa-upload"></i>
                                                        <input type="file" class="form-control" name="bg_image" onchange="jQuery(this).next('input').val(this.value);preBGImage(this)" />
                                                        <input type="text" name="bg_image" class="form-control" placeholder="no file selected" readonly="" />
                                                        <span class="button">Choose File</span>
                                                    </div>
                                                    <small class="text-muted block">Max file size: 10Mb (jpg/png)</small>



                                                </div>
                                                <div class="col-md-6 col-sm-6">
                                                    <div class="alert alert-bordered-dotted">
                                                        <label>
                                                            Background Lazy Image
                                                            <small class="text-muted">(optional)</small>
                                                        </label>

                                                        <figure class="margin-bottom-10"><!-- image -->
                                                            <img id="LBG_image" class="img-responsive" src="<?php echo img_check(base_url().IMAGE_PATH.@$item->bg_lazyimage)?>" alt="" />
                                                        </figure><!-- /image -->

                                                    </div>

                                                    <!-- custom file upload -->
                                                    <div class="fancy-file-upload fancy-file-primary">
                                                        <i class="fa fa-upload"></i>
                                                        <input type="file" class="form-control" name="bg_lazyimage" onchange="jQuery(this).next('input').val(this.value);preLBGImage(this)" />
                                                        <input type="text" class="form-control" name="bg_lazyimage" placeholder="no file selected" readonly="" />
                                                        <span class="button">Choose File</span>
                                                    </div>
                                                    <small class="text-muted block">Max file size: 10Mb (jpg/png)</small>

                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="form-group">
                                                <div class="col-md-12 col-sm-12">
                                                    <label>Background Image Position *</label>
                                                    <select class="form-control select2 required" name="bg_position">
                                                        <option value="">--- Select ---</option>
                                                        <option <?php echo @$item->bg_position=='left top'?'selected':''?> value="left top">left top</option>
                                                        <option <?php echo @$item->bg_position=='left center'?'selected':''?> value="left center">left center</option>
                                                        <option <?php echo @$item->bg_position=='left bottom'?'selected':''?> value="left bottom">left bottom</option>
                                                        <option <?php echo @$item->bg_position=='center top'?'selected':''?> value="center top">center top</option>
                                                        <option <?php echo @$item->bg_position=='center center'?'selected':''?> value="center center">center center</option>
                                                        <option <?php echo @$item->bg_position=='center bottom'?'selected':''?> value="center bottom">center bottom</option>
                                                        <option <?php echo @$item->bg_position=='right top'?'selected':''?> value="right top">right top</option>
                                                        <option <?php echo @$item->bg_position=='right center'?'selected':''?> value="right center">right center</option>
                                                        <option <?php echo @$item->bg_position=='right bottom'?'selected':''?> value="right bottom">right bottom</option>

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

                                        <div class="row">
                                            <div class="form-group">
                                                <div class="col-md-6 col-sm-6">
                                                    <label>Background Image Alternate <small class="text-muted">(optional)</small></label>
                                                    <input type="text" name="bg_alt" value="<?php echo @$item->bg_alt==''?'video':$item->bg_alt ?>" class="form-control required">
                                                </div>
                                                <div class="col-md-6 col-sm-6">
                                                    <label>Background Image Fit <small class="text-muted">(optional)</small></label>
                                                    <select class="form-control select2 required" name="bg_fit">
                                                        <option value="">--- Select ---</option>
                                                        <option <?php echo @$item->bg_fit=='auto'?'selected':''?> value="auto">auto</option>
                                                        <option <?php echo @$item->bg_fit=='length'?'selected':''?> value="length">length</option>
                                                        <option <?php echo @$item->bg_fit=='cover'?'selected':''?> value="cover">cover</option>
                                                        <option <?php echo @$item->bg_fit=='contain'?'selected':''?> value="contain">contain</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>

                                    </div>

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

                                        <div class="row">
                                            <div class="form-group">
                                                <div class="col-md-12 col-sm-12">
                                                    <label>Slider Title *</label>
                                                    <input type="text" name="title" value="<?php echo @$item->title?>" class="form-control required">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="form-group">
                                                <div class="col-md-12 col-sm-12">
                                                    <label>Slider Background Color *</label>
                                                    <input type="text" name="bg_color" value="<?php echo @$item->bg_color?>" class="form-control colorpicker required" data-format="hex" data-defaultColor="<?php echo @$item->slider_bg_color?>">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="form-group">
                                                <div class="col-md-12 col-sm-12">
                                                    <label>Slider Transition *</label>
                                                    <select class="form-control select2 required" name="transition">
                                                        <option value="">--- Select ---</option>
                                                        <option <?php echo @$item->transition=='notransition'?'selected':''?> value="notransition">notransition</option>
                                                        <option <?php echo @$item->transition=='fade'?'selected':''?> value="fade">fade</option>
                                                        <option <?php echo @$item->transition=='slideup'?'selected':''?> value="slideup">slideup</option>
                                                        <option <?php echo @$item->transition=='slidedown'?'selected':''?> value="slidedown">slidedown</option>
                                                        <option <?php echo @$item->transition=='slideright'?'selected':''?> value="slideright">slideright</option>
                                                        <option <?php echo @$item->transition=='slideleft'?'selected':''?> value="slideleft">slideleft</option>
                                                        <option <?php echo @$item->transition=='slidehorizontal'?'selected':''?> value="slidehorizontal">slidehorizontal</option>
                                                        <option <?php echo @$item->transition=='slidevertical'?'selected':''?> value="slidevertical">slidevertical</option>
                                                        <option <?php echo @$item->transition=='slideoverup'?'selected':''?> value="slideoverup">slideoverup</option>
                                                        <option <?php echo @$item->transition=='slideoverdown'?'selected':''?> value="slideoverdown">slideoverdown</option>
                                                        <option <?php echo @$item->transition=='slideoverright'?'selected':''?> value="slideoverright">slideoverright</option>
                                                        <option <?php echo @$item->transition=='slideoverleft'?'selected':''?> value="slideoverleft">slideoverleft</option>
                                                        <option <?php echo @$item->transition=='slideoverhorizontal'?'selected':''?> value="slideoverhorizontal">slideoverhorizontal</option>
                                                        <option <?php echo @$item->transition=='slideoververtical'?'selected':''?> value="slideoververtical">slideoververtical</option>
                                                        <option <?php echo @$item->transition=='boxslide'?'selected':''?> value="boxslide">boxslide</option>
                                                        <option <?php echo @$item->transition=='slotslide'?'selected':''?> value="slotslide">slotslide</option>
                                                        <option <?php echo @$item->transition=='boxfade'?'selected':''?> value="boxfade">boxfade</option>
                                                        <option <?php echo @$item->transition=='slotfade'?'selected':''?> value="slotfade">slotfade</option>
                                                        <option <?php echo @$item->transition=='fadefromright'?'selected':''?> value="fadefromright">fadefromright</option>
                                                        <option <?php echo @$item->transition=='fadefromleft'?'selected':''?> value="fadefromleft">fadefromleft</option>
                                                        <option <?php echo @$item->transition=='fadefromtop'?'selected':''?> value="fadefromtop">fadefromtop</option>
                                                        <option <?php echo @$item->transition=='fadefrombottom'?'selected':''?> value="fadefrombottom">fadefrombottom</option>
                                                        <option <?php echo @$item->transition=='fadetoleftfadefromright'?'selected':''?> value="fadetoleftfadefromright">fadetoleftfadefromright</option>
                                                        <option <?php echo @$item->transition=='fadetorightfadefromleft'?'selected':''?> value="fadetorightfadefromleft">fadetorightfadefromleft</option>
                                                        <option <?php echo @$item->transition=='fadetotopfadefrombottom'?'selected':''?> value="fadetotopfadefrombottom">fadetotopfadefrombottom</option>
                                                        <option <?php echo @$item->transition=='fadetobottomfadefromtop'?'selected':''?> value="fadetobottomfadefromtop">fadetobottomfadefromtop</option>
                                                        <option <?php echo @$item->transition=='parallaxtoright'?'selected':''?> value="parallaxtoright">parallaxtoright</option>
                                                        <option <?php echo @$item->transition=='parallaxtoleft'?'selected':''?> value="parallaxtoleft">parallaxtoleft</option>
                                                        <option <?php echo @$item->transition=='parallaxtotop'?'selected':''?> value="parallaxtotop">parallaxtotop</option>
                                                        <option <?php echo @$item->transition=='parallaxtobottom'?'selected':''?> value="parallaxtobottom">parallaxtobottom</option>
                                                        <option <?php echo @$item->transition=='parallaxhorizontal'?'selected':''?> value="parallaxhorizontal">parallaxhorizontal</option>
                                                        <option <?php echo @$item->transition=='parallaxvertical'?'selected':''?> value="parallaxvertical">parallaxvertical</option>
                                                        <option <?php echo @$item->transition=='scaledownfromright'?'selected':''?> value="scaledownfromright">scaledownfromright</option>
                                                        <option <?php echo @$item->transition=='scaledownfromleft'?'selected':''?> value="scaledownfromleft">scaledownfromleft</option>
                                                        <option <?php echo @$item->transition=='scaledownfromtop'?'selected':''?> value="scaledownfromtop">scaledownfromtop</option>
                                                        <option <?php echo @$item->transition=='scaledownfrombottom'?'selected':''?> value="scaledownfrombottom">scaledownfrombottom</option>
                                                        <option <?php echo @$item->transition=='zoomout'?'selected':''?> value="zoomout">zoomout</option>
                                                        <option <?php echo @$item->transition=='zoomin'?'selected':''?> value="zoomin">zoomin</option>
                                                        <option <?php echo @$item->transition=='slotzoom'?'selected':''?> value="slotzoom">slotzoom</option>
                                                        <option <?php echo @$item->transition=='curtain'?'selected':''?> value="curtain">curtain</option>
                                                        <option <?php echo @$item->transition=='3dcurtain'?'selected':''?> value="3dcurtain">3dcurtain</option>
                                                        <option <?php echo @$item->transition=='cube'?'selected':''?> value="cube">cube</option>
                                                        <option <?php echo @$item->transition=='incube'?'selected':''?> value="incube">incube</option>
                                                        <option <?php echo @$item->transition=='turnoff'?'selected':''?> value="turnoff">turnoff</option>
                                                        <option <?php echo @$item->transition=='papercut'?'selected':''?> value="papercut">papercut</option>
                                                        <option <?php echo @$item->transition=='flyin'?'selected':''?> value="flyin">flyin</option>
                                                        <option <?php echo @$item->transition=='slideremoveup'?'selected':''?> value="slideremoveup">slideremoveup</option>
                                                        <option <?php echo @$item->transition=='slideremovedown'?'selected':''?> value="slideremovedown">slideremovedown</option>
                                                        <option <?php echo @$item->transition=='slideremoveright'?'selected':''?> value="slideremoveright">slideremoveright</option>
                                                        <option <?php echo @$item->transition=='slideremoveleft'?'selected':''?> value="slideremoveleft">slideremoveleft</option>
                                                        <option <?php echo @$item->transition=='slideremovehorizontal'?'selected':''?> value="slideremovehorizontal">slideremovehorizontal</option>
                                                        <option <?php echo @$item->transition=='slideremovevertical'?'selected':''?> value="slideremovevertical">slideremovevertical</option>
                                                        <option <?php echo @$item->transition=='random'?'selected':''?> value="random">random</option>

                                                    </select>

                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="form-group">
                                                <div class="col-md-12 col-sm-12">
                                                    <label>Slider Master Speed(millisecond) *</label>
                                                    <input type="text" name="masterspeed" value="<?php echo @$item->masterspeed==''?1000:$item->masterspeed?>"  min="1" max="100000" data-mousescrool="false" class="form-control stepper">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="form-group">
                                                <div class="col-md-12 col-sm-12">
                                                    <label>Slider Delay(millisecond) *</label>
                                                    <input type="text" name="delay" value="<?php echo @$item->delay==''?10000:$item->delay?>"  min="1" max="100000" data-mousescrool="false" class="form-control stepper">
                                                </div>
                                            </div>
                                        </div>


                                    </div>
                                </div>

                                <div class="tabs nomargin">

                                    <!-- tabs -->
                                    <ul class="nav nav-tabs">
                                        <?php foreach ($langs as $key => $lang){?>
                                            <li class="<?php echo $key==0?'active':''?>">
                                                <a href="#tab<?php echo $key+1?>_desc" data-toggle="tab">
                                                    <label>Inner HTML <?php echo strtoupper($lang->shorttitle)?> * </label>
                                                </a>
                                            </li>
                                        <?php }?>
                                    </ul>

                                </div>

                                <hr>

                                <div class="row">
                                    <div class="form-group">
                                        <div class=" col-md-12 col-sm-12" align="right">
                                            <label class="switch switch switch-round">
                                                <span> Active to public on the web?</span>

                                                <input name="is_active" type="checkbox" <?php echo @$item->is_active=='Y'?'checked=""':''?> >
                                                <span class="switch-label" data-on="Yes" data-off="No"></span>
                                            </label>
                                        </div>

                                    </div>
                                </div>

                            </fieldset>

                            <div class="row">
                                <div class="col-md-12">
                                    <button id="savebtn" type="submit" form="sliderform" value="Submit" class="progress-button btn btn-3d btn-teal btn-xlg btn-block margin-top-30" >
                                        SAVE
                                    </button>
                                </div>
                            </div>

                        </form>

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

            <div class="col-md-12">
                <?php if(@$item->id!=''){?>
                    <div class="panel panel-default">
                        <div class="panel-heading panel-heading-transparent">
                            <strong>Slider items</strong>
                            <!-- right options -->
                        </div>

                        <div class="panel-body">

                            <table id="slider_grid"></table>

                            <div id="pager_slider_grid"></div>

                        </div>

                    </div>
                <?php } ?>
            </div>






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