@extends('layouts.app-admin')

@section('title', trans('admin_default.template_management'))

@section('content')

<!-- Page content -->
<div class="page-content">

    <!-- Main content -->
    <div class="content-wrapper">

        <div id="pnotify-solid-primary"></div>
        <div id="pnotify-create-user"></div>

        <!-- Default ordering -->
        <div class="panel panel-flat">
            <div class="panel-heading">
                <h5 class="panel-title">
                    <i class="icon-browser position-left"></i> 
                    {{trans('admin_default.list_template')}}
                    <a href="#" class="btn text-teal-600 border-teal btn-flat pull-right" data-toggle="modal" data-target="#modalSup">
                        <i class=" icon-plus3 position-left"></i>
                        {{trans('admin_default.add')}}
                    </a>
                </h5>
            </div>
            <div class="panel-body">    
                <table class="table table-bordered table-framed">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>{{trans('admin_default.template_name')}}</th>
                            <th>{{trans('admin_default.thumnail')}}</th>
                            <th>{{trans('admin_default.tag')}}</th>
                            <th class="text-center">{{trans('admin_default.action')}}</th>
                        </tr>
                    </thead>

                    <tbody>
                    
                                                @foreach(@$data as $key => $value)
                                                <tr>
                            <td>{{$index}}</td>
                            <td>{{$template_property->template_name}}</td>
                            <td>
                              
                                <a href="{{@$template_property->thumnail}}" data-popup="lightbox"><img src="{{@$template_property->thumnail}}" style="width: 100px; height: 100px;"></a>
                            </td>
                            <td>{{@$value->tag}}</td>
                            <td class="text-center">
                                <ul class="icons-list">
                                    <li class="dropdown">
                                        <a href="#" class=" dropdown-toggle" data-toggle="dropdown">
                                            <i class="icon-menu9 text-teal-600"></i>
                                        </a>

                                        <ul class="dropdown-menu dropdown-menu-right">

                                            <li>
                                                <a href="#" data-popup="tooltip" title="Edit" class="btn-edit"
                                                data-id="{{@$value->id}}"
                                                data-template-name="{{@$template_property->template_name}}"
                                                data-slider-width = "{{@$template_property->slider_width}}"
                                                data-slider-height = "{{@$template_property->slider_height}}"
                                                data-image-name="{{@$template_property->image_name}}"
                                                data-exist-path="{{@$template_property->thumnail}}"
                                                data-tag="{{@$value->tag}}"
                                                data-primary-color="{{@$template_property->primary_color}}"
                                                data-secondary-color="{{@$template_property->secondary_color}}"
                                                data-menu-background-color="{{@$template_property->menu_background_color}}"
                                                data-menu-text-color="{{@$template_property->menu_text_color}}">
                                                    <i class="icon-pencil7"></i> {{trans('admin_default.edit')}}
                                                </a>
                                            </li>  
                                            <li>
                                                <a href="#" class="btn-delete" data-id="{{$value->id}}" data-popup="tooltip"  title="Delete"
                                                >
                                                    <i class="icon-trash"></i> {{trans('admin_default.delete')}}
                                                </a>
                                            </li>

                                        </ul>
                                    </li>
                                </ul>
                            </td>
                        </tr>
                      @endforeach
                    </tbody>
                </table>
                 @if(count($data))
                    <div class="clearfix"></div>
                    @include('elements.paginate')
                @endif
            </div>
        </div>
        <!-- /Inform Delect user-->     
    </div>
    <!-- /main content -->

</div>
<!-- /page content -->

<!-- Add template modal -->
<div class="modal fade" id="modalSup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
        
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel"> <i class="icon-plus3"></i> New Template</h4>   
            </div>

            <form action="{{url('template-managment/save')}}" method="POST" enctype="multipart/form-data">
                {!! csrf_field() !!}
                <input type="hidden" name="user_id" id="hidden_id" value="">
                <div class="modal-body">
                    <div class="form-group">
                        <label class="control-label col-lg-3">Template Name<span class="text-danger">*</span></label>
                        <div class="col-lg-9">
                            <input type="text" class="form-control" name="data[template_name]" required>
                        </div>
                    </div>

                    <div class="clearfix"></div>
                    <div class="form-group">
                        <label class="control-label col-lg-3">Slider Width</label>
                        <div class="col-lg-9">
                            <input type="number" class="form-control" name="data[slider_width]">
                        </div>
                    </div>

                    <div class="clearfix"></div>
                    <div class="form-group">
                        <label class="control-label col-lg-3">Slider Heigh</label>
                        <div class="col-lg-9">
                            <input type="number" class="form-control" name="data[slider_height]">
                        </div>
                    </div>

                    <div class="clearfix"></div>
                    <div class="form-group">
                        <label class="control-label col-lg-3">Tag</label>
                        <div class="col-lg-9">
                            <select multiple="multiple" class="select" name="tag[]">
                                @foreach($website_tags as $key => $value)
                                    <option value="{{@$value}}">{{@$value}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="clearfix"></div>
                    <div class="form-group">
                        <label class="control-label col-lg-3">Primary Color</label>
                        <div class="col-lg-9">
                            <input type="text" class="form-control" data-preferred-format="hex3" value="#4CAF50" name="data[primary_color]">
                        </div>
                    </div>

                    <div class="clearfix"></div>
                    <div class="form-group">
                        <label class="control-label col-lg-3">Secondary Color</label>
                        <div class="col-lg-9">
                            <input type="text" class="form-control" data-preferred-format="hex3" value="#FFFFFF" name="data[secondary_color]">
                        </div>
                    </div>

                    <div class="clearfix"></div>
                    <div class="form-group">
                        <label class="control-label col-lg-3">Menu Color</label>
                        <div class="col-lg-9">
                            <input type="text" class="form-control" data-preferred-format="hex3" value="#4CAF50" name="data[menu_background_color]">
                        </div>
                    </div>
    
                    <div class="clearfix"></div>
                    <div class="form-group">
                        <label class="control-label col-lg-3">Menu Text Color</label>
                        <div class="col-lg-9">
                            <input type="text" class="form-control" data-preferred-format="hex3" value="#000000" name="data[menu_text_color]">
                        </div>
                    </div>

                    <div class="clearfix"></div>
                    <div class="form-group">
                        <label class="control-label col-lg-3">Thumnail<span class="text-danger">*</span></label>
                        <div class="col-lg-9">
                            <input type="file" class="form-control" name="thumnail" required>
                        </div>
                    </div>
                </div>

                <div class="clearfix"></div>
                <div class="modal-footer">
                    <button id="delete-btn" type="submit" class="btn btn-extia bg-success">
                    {{trans('admin_default.save')}}
                    </button>                           
                    <button type="button" class="btn btn-default " data-dismiss="modal">
                     {{trans('admin_default.cancel')}}
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Edit template modal -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
        
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel"> <i class="icon-plus3"></i> New Template</h4>   
            </div>

            <form action="{{url('template-managment/save')}}" method="POST" enctype="multipart/form-data">
                {!! csrf_field() !!}
                <input type="hidden" name="user_id" id="hidden_id" value="">
                <div class="modal-body">
                    <div class="form-group">
                        <label class="control-label col-lg-3">Template Name<span class="text-danger">*</span></label>
                        <div class="col-lg-9">
                            <input type="text" class="form-control" name="data[template_name]" id="template_name">
                        </div>
                    </div>
                    <div class="clearfix"></div>
                    <div class="form-group">
                        <label class="control-label col-lg-3">Slider Width</label>
                        <div class="col-lg-9">
                            <input type="number" class="form-control" name="data[slider_width]" id="slider_width">
                        </div>
                    </div>
                    <div class="clearfix"></div>
                    <div class="form-group">
                        <label class="control-label col-lg-3">Slider Heigh</label>
                        <div class="col-lg-9">
                            <input type="number" class="form-control" name="data[slider_height]" id="slider_height">
                        </div>
                    </div>
                    <div class="clearfix"></div>
                    <div class="form-group">
                        <label class="control-label col-lg-3">Primary Color</label>
                        <div class="col-lg-9">
                            <input type="text" class="form-control" data-preferred-format="hex3" name="data[primary_color]" id="primary_color">
                        </div>
                    </div>

                    <div class="clearfix"></div>
                    <div class="form-group">
                        <label class="control-label col-lg-3">Secondary Color</label>
                        <div class="col-lg-9">
                            <input type="text" class="form-control" data-preferred-format="hex3" name="data[secondary_color]" id="secondary_color">
                        </div>
                    </div>

                    <div class="clearfix"></div>
                    <div class="form-group">
                        <label class="control-label col-lg-3">Menu Color</label>
                        <div class="col-lg-9">
                            <input type="text" class="form-control" data-preferred-format="hex3" name="data[menu_background_color]" id="menu_background_color">
                        </div>
                    </div>
    
                    <div class="clearfix"></div>
                    <div class="form-group">
                        <label class="control-label col-lg-3">Menu Text Color</label>
                        <div class="col-lg-9">
                            <input type="text" class="form-control" data-preferred-format="hex3" name="data[menu_text_color]" id="menu_text_color">
                        </div>
                    </div>
                    <div class="clearfix"></div>
                    <div class="form-group">
                        <label class="control-label col-lg-3">Tag</label>
                        <div class="col-lg-9">
                            <select multiple="multiple" class="select select_tag" name="tag[]">
                                @foreach($website_tags as $key => $value)
                                    <option value="{{@$value}}">{{@$value}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="clearfix"></div>
                    <div class="form-group">
                        <label class="control-label col-lg-3">Thumnail</label>
                        <div class="col-lg-9">
                            <input type="file" class="form-control" name="thumnail">
                        </div>
                    </div>
                </div>
                <div class="clearfix"></div>
                <div class="modal-footer">
                    <button id="delete-btn" type="submit" class="btn btn-extia bg-success">
                    {{trans('admin_default.save')}}
                    </button>                           
                    <button type="button" class="btn btn-default " data-dismiss="modal">
                     {{trans('admin_default.cancel')}}
                    </button>
                </div>
                <input type="hidden" name="hidden_id" id="hidden_id">
                <input type="hidden" name="exist_path" id="hidden_exist_path">
                <input type="hidden" name="image_name" id="hidden_image_name">
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
        
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h6 class="modal-title"> Are you sure?</h6>   
            </div>

            <form action="{{url('template-managment/delete')}}" method="POST" id="frmDelete">
                {!! csrf_field() !!}
                <div class="modal-body">
                        <label class="control-label col-lg-12">Do you want to delete this template?</label>
                </div>
                <div class="clearfix"></div>
                <div class="modal-footer">
                    <button id="delete-btn" type="submit" class="btn btn-extia bg-success">
                    {{trans('admin_default.ok')}}
                    </button>                           
                    <button type="button" class="btn btn-default " data-dismiss="modal">
                     {{trans('admin_default.cancel')}}
                    </button>
                </div>
                <input type="hidden" name="hidden_id" id="hidden_id">
            </form>
        </div>
    </div>
</div>


@endsection


@section('script')

<script type="text/javascript">

    // A $( document ).ready() block.
    $( document ).ready(function() {
        $('a.btn-delete').click(function(){
            var me = $(this),
                id = me.attr('data-id');

            var modal = $('#deleteModal');
            modal.find('#hidden_id').val(id);

            modal.modal('show');
        });

        $('a.btn-edit').click(function(){

            var me = $(this);
            var modal = $('#editModal');
            var id = me.attr('data-id');
            var template_name = me.attr('data-template-name');
            var slider_width = me.attr('data-slider-width');
            var slider_height = me.attr('data-slider-height');
            var image_name = me.attr('data-image-name');
            var exist_path = me.attr('data-exist-path');
            var tag = me.attr('data-tag');
            var primary_color = me.attr('data-primary-color');
            var secondary_color = me.attr('data-secondary-color');
            var menu_background = me.attr('data-menu-background-color');
            var menu_text_color = me.attr('data-menu-text-color');


            modal.find('#hidden_id').val(id);
            modal.find('#template_name').val(template_name);
            modal.find('#slider_width').val(slider_width);
            modal.find('#slider_height').val(slider_height);
            modal.find('#hidden_image_name').val(image_name);
            modal.find('#hidden_exist_path').val(exist_path);
            modal.find('#primary_color').val(primary_color);
            modal.find('#secondary_color').val(secondary_color);
            modal.find('#menu_background_color').val(menu_background);
            modal.find('#menu_text_color').val(menu_text_color);

            var tags_arr = [];
            if(tag != ''){
                tags_arr = tag.split(',');
            }

            var select_tag = modal.find('.select_tag');
            var select2_selection__rendered = modal.find('.select2-selection__rendered');
            // clear select
            select2_selection__rendered.html("");
            // set empty value to select
            select_tag.val([]);
            // loop the set value to select
            jQuery.each(tags_arr , function(key,value) {
                $(".select_tag option[value='" + value + "']").prop("selected", true);
                // select_tag.val(value);

                var li = "<li class=select2-selection__choice title='"+value+"'>"+
                            '<span class="select2-selection__choice__remove" role="presentation">×</span>'+value+"</li>";
                    select2_selection__rendered.append(li);

            });

            select2_selection__rendered.append('<li class="select2-search select2-search--inline"><input class="select2-search__field" type="search" tabindex="0" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" role="textbox" aria-autocomplete="list" placeholder="" style="width: 0.75em;"></li>');

            modal.modal('show');

        });

    });

    @if(Session::has('message-delete'))

        // notifycation Solid primary
        $( "#pnotify-solid-primary" ).after(function() {
              new PNotify({
                title: '<b>Template</b>',
                text: '{{ \Session::get('message-delete') }}',
                addclass: 'alert-styled-left'
            });
        }); 

    @endif

    @if(Session::has('message-update'))

        // notifycation Solid primary
        $( "#pnotify-solid-primary" ).after(function() {
              new PNotify({
                title: '<b>Template</b>',
                text: '{{ \Session::get('message-update') }}',
                addclass: 'alert-styled-left'
            });
        }); 

    @endif  

    @if(Session::has('message-create'))

        // notifycation Solid primary
        $( "#pnotify-create-user" ).after(function() {
              new PNotify({
                title: '<b>Template</b>',
                text: '{{ \Session::get('message-create') }}',
                addclass: 'bg-success'
            });
        }); 

    @endif  
</script>

@endsection