@extends('admin.main')
@section('content')
<style>
    .additional-info{
        display:none;
    }
    /* for add template step by step design*/
    .wizard {
        margin: 20px auto;
        background: #fff;
        margin-top: -38px;
    }

    .wizard .nav-tabs {
        position: relative;
        margin: 40px auto;
        margin-bottom: 0;
        border-bottom-color: #e0e0e0;
    }

    .wizard > div.wizard-inner {
        position: relative;
    }

    .connecting-line {
        height: 2px;
        background: #e0e0e0;
        position: absolute;
        width: 65%;
        margin: 0 auto;
        left: 0;
        right: 0;
        top: 50%;
        z-index: 1;
    }

    .wizard .nav-tabs > li.active > a, .wizard .nav-tabs > li.active > a:hover, .wizard .nav-tabs > li.active > a:focus {
        color: #555555;
        cursor: default;
        border: 0;
        border-bottom-color: transparent;
    }

    span.round-tab {
        width: 70px;
        height: 70px;
        line-height: 70px;
        display: inline-block;
        border-radius: 100px;
        background: #fff;
        border: 2px solid #e0e0e0;
        z-index: 2;
        position: absolute;
        left: 0;
        text-align: center;
        font-size: 25px;
    }
    span.round-tab i{
        color:#555555;
    }
    .wizard li.active span.round-tab {
        background: #fff;
        border: 2px solid #5bc0de;
        
    }
    .wizard li.active span.round-tab i{
        color: #5bc0de;
    }

    span.round-tab:hover {
        color: #333;
        border: 2px solid #333;
    }

    .wizard .nav-tabs > li {
        width: 33.33333333333333%;
    }

    .wizard li:after {
        content: " ";
        position: absolute;
        left: 46%;
        opacity: 0;
        margin: 0 auto;
        bottom: 0px;
        border: 5px solid transparent;
        border-bottom-color: #5bc0de;
        transition: 0.1s ease-in-out;
    }

    .wizard li.active:after {
        content: " ";
        position: absolute;
        left: 46%;
        opacity: 1;
        margin: 0 auto;
        bottom: 0px;
        border: 10px solid transparent;
        border-bottom-color: #5bc0de;
    }

    .wizard .nav-tabs > li a {
        width: 70px;
        height: 70px;
        margin: 20px auto;
        border-radius: 100%;
        padding: 0;
    }

    .wizard .nav-tabs > li a:hover {
        background: transparent;
    }

    .wizard .tab-pane {
        position: relative;
        padding-top: 20px;
    }

    .wizard h3 {
        margin-top: 0;
    }

    @media( max-width : 585px ) {

        .wizard {
            width: 90%;
            height: auto !important;
        }

        span.round-tab {
            font-size: 16px;
            width: 50px;
            height: 50px;
            line-height: 50px;
        }

        .wizard .nav-tabs > li a {
            width: 50px;
            height: 50px;
            line-height: 50px;
        }

        .wizard li.active:after {
            content: " ";
            position: absolute;
            left: 35%;
        }
    }
    /*end*/

    /* spectrum custom css */
    .sp-replacer{
        padding: 6px;
        width: 100%;
    }

    .sp-preview{
        margin-right: 0px;
        width: 100%;
    }

    .sp-dd{
        display: none;
    }
    /* end spectrum custom css */
</style>

<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
    <h1>
        Adding of Visualizer
        <!-- <small>Optional description</small> -->
    </h1>
    <ol class="breadcrumb">
        <li><a href="{{ url ('admin') }}"><i class="fa fa-dashboard"></i> Dashboard</a></li>
        <li><a href="{{ url ('admin') }}"><i class="fa fa-paint-brush"></i> Visualizer Management</a></li>
        <li class="active"> Add Visualizer</li>
    </ol>
    </section>

    <!-- Main content -->
    <section class="content container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="box">
                    <div class="box-header with-border">
                       <h4 class="box-title">Visualizer</h4>
                    </div>
                    <div class="box-body">
                        <div class="row">
                                <div class="col-lg-12 col-sm-12">
                                    <div id="saveTemplateMsg"></div>
                                    <section>
                                        <div class="wizard">
                                            <div class="wizard-inner">
                                                <div class="connecting-line"></div>
                                                <ul class="nav nav-tabs" role="tablist">
                                                    <li role="presentation" class="active">
                                                        <a href="#step1" data-toggle="tab" aria-controls="step1" role="tab" title="Step 1">
                                                            <span class="round-tab">
                                                                <i class="glyphicon glyphicon-list"></i>
                                                            </span>
                                                        </a>
                                                    </li>
        
                                                    <li role="presentation" class="disabled">
                                                        <a href="#step2" data-toggle="tab" aria-controls="step2" role="tab" title="Step 2">
                                                            <span class="round-tab">
                                                                <i class="glyphicon glyphicon-pencil"></i>
                                                            </span>
                                                        </a>
                                                    </li>
        
                                                    <li role="presentation" class="disabled">
                                                        <a href="#complete" data-toggle="tab" aria-controls="complete" role="tab" title="Complete">
                                                            <span class="round-tab">
                                                                <i class="glyphicon glyphicon-ok"></i>
                                                            </span>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div>
        
                                            <form role="form" class="form-horizontal" id="frm_addnew_visualizer" enctype="multipart/form-data">
                                                <div class="tab-content">
                                                    <div class="tab-pane active" role="tabpanel" id="step1">
                                                        <div class="col-sm-12">
                                                            <h3><small><i class="fa fa-link" aria-hidden="true"></i></small> Step one</h3>
                                                            <br>
                                                        </div>
                                                        <div class="col-lg-8 col-sm-8">
                                                            <div class="form-group">
                                                                <label  class="col-sm-4 control-label">Select Sports</label>
                                                                <div class="col-sm-8">
                                                                    <select class="form-control" id="sportName" name="sportName">
                                                                        @foreach ($sports_array as $sports)
                                                                            <option value="{{ $sports->Id }}">{{ $sports->SportsName }}</option>
                                                                        @endforeach
                                                                    </select>
                                                                </div>
                                                            </div>
                                                            <div class="form-group">
                                                                <label  class="col-sm-4 control-label">Select Category</label>
                                                                <div class="col-sm-8">
                                                                    <select class="form-control" id="sport_category" name="sport_category">
                                                                    </select>
                                                                </div>
                                                            </div>
                                                            <div class="form-group">
                                                                <label  class="col-sm-4 control-label">Visualizer Name</label>
                                                                <div class="col-sm-8">
                                                                    <input type="text" class="form-control" name="visualizer_name" placeholder="Visualizer Name" />
                                                                </div>
                                                            </div>
                                                            <div class="form-group">
                                                                <label  class="col-sm-4 control-label">Select Overlay Pattern</label>
                                                                <div class="col-sm-8">
                                                                    <select class="form-control" id='select2_select_pattern' name="visualizer_pattern[]" multiple="multiple" style='min-width:200px'>
                                                                        @foreach ($pattern_array as $pattern)
                                                                            <option value="{{ $pattern->PatternId . '##' . $pattern->PatternThumbnail .'##' . $pattern->NoOFColor . '##' . $pattern->Opacity . '##' . $pattern->Gradient }}"> {{ $pattern->PatternName }}</option>
                                                                        @endforeach
                                                                    </select>
                                                                </div>
                                                            </div>
                                                            <div class="form-group">
                                                                <label  class="col-sm-4 control-label">Tags</label>
                                                                <div class="col-sm-8">
                                                                    <input type="text" class="form-control" name="visualizer_tags" placeholder="Visualizer Tags" reqiured="required" />
                                                                </div>
                                                            </div>
                                                            <div class="form-group">
                                                                <label  class="col-sm-4 control-label">Add Thumbnail</label>
                                                                <div class="col-sm-8">
                                                                    <input type="file" data-use-id="img_store_logo" class="form-control upload_img" name="visualizer_thumbnail"  reqiured="required" />
                                                                </div>
                                                            </div>
                                                            <div class="form-group" >
                                                                <label  class="col-sm-4 control-label"></label>
                                                                <div class="col-sm-8">
                                                                    <p>Preview:</p>
                                                                    <div class="store-logo-holder">
                                                                        <a href="{{ config('site_config.images_directory')  . 'teamstore/store-logo-placeholder.jpg' }}" class="img_store_logo_href"   data-toggle="lightbox">
                                                                            <img class="img_store_logo_img"  id="img_store_logo" src="{{ config('site_config.images_directory')  . 'teamstore/store-logo-placeholder.jpg' }}" style="max-width: 100%; max-height: 100%; ">
                                                                        </a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        
                                                        <div class="col-sm-12">
                                                            <ul class="list-inline pull-right" style="margin-top: 50px;">
                                                                <li><button type="button" id="stepOneNextBtn" class="btn btn-primary next-step" >Next <i class="fa fa-long-arrow-right" aria-hidden="true"></i></button></li>
                                                            </ul>
                                                        </div>   
                                                    </div>
        
                                                    <!-- STEP TWO -->
                                                    <div class="tab-pane" role="tabpanel" id="step2">
                                                        <div class="col-sm-12">
                                                            <h3><small><i class="fa fa-link" aria-hidden="true"></i></small> Step two</h3>
                                                            <br>
                                                        </div>
                                                        <div class="col-sm-6">
                                                            <div class="form-group">
                                                                <label  class="col-sm-2 control-label">Front</label>
                                                                <div class="col-sm-10">
                                                                    <div class="input-group">
                                                                        <span class="input-group-btn">
                                                                            <select  name="front_visualizer_type" class="form-control" style="width:100px;">
                                                                                <option>Jersey</option>
                                                                                <option>Shorts</option>
                                                                                <option>Shirts</option>
                                                                                <option>Hoodie</option>
                                                                            </select>
                                                                        </span>
                                                                        <input type="file" name="front_visualizer" data-use-id="front_visualizer" class="form-control upload-visualizer">
                                                                        <span class="input-group-btn">
                                                                            <button data-visualizer="#" class="btn btn-primary front_visualizer_href btn-preview-visualizer" type="button">
                                                                                <i class="fa fa-eye" aria-hidden="true">
                                                                                </i> Preview
                                                                            </button>
                                                                        </span>
                                                                    </div>
                                                                </div>
                                                            </div>

                                                            <div class="form-group">
                                                                <label  class="col-sm-2 control-label">Back</label>
                                                                <div class="col-sm-10">
                                                                    <div class="input-group">
                                                                        <span class="input-group-btn">
                                                                            <select  name="back_visualizer_type" class="form-control" style="width:100px;">
                                                                                <option>Jersey</option>
                                                                                <option>Shorts</option>
                                                                                <option>Shirts</option>
                                                                                <option>Hoodie</option>
                                                                            </select>
                                                                        </span>
                                                                        <input type="file" name="back_visualizer" data-use-id="back_visualizer" class="form-control upload-visualizer">
                                                                        <span class="input-group-btn">
                                                                            <button data-visualizer="#" class="btn btn-primary back_visualizer_href btn-preview-visualizer" type="button">
                                                                                <i class="fa fa-eye" aria-hidden="true">
                                                                                </i> Preview
                                                                            </button>
                                                                        </span>
                                                                    </div>
                                                                </div>
                                                            </div>

                                                            <div class="form-group">
                                                                <label  class="col-sm-2 control-label">Right</label>
                                                                <div class="col-sm-10">
                                                                    <div class="input-group">
                                                                        <span class="input-group-btn">
                                                                            <select  name="right_visualizer_type" class="form-control" style="width:100px;">
                                                                                <option>Jersey</option>
                                                                                <option>Shorts</option>
                                                                                <option>Shirts</option>
                                                                                <option>Hoodie</option>
                                                                            </select>
                                                                        </span>
                                                                        <input type="file" name="right_visualizer" data-use-id="right_visualizer" class="form-control upload-visualizer">
                                                                        <span class="input-group-btn">
                                                                            <button data-visualizer="#" class="btn btn-primary right_visualizer_href btn-preview-visualizer" type="button">
                                                                                <i class="fa fa-eye" aria-hidden="true">
                                                                                </i> Preview
                                                                            </button>
                                                                        </span>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="form-group">
                                                                <label  class="col-sm-2 control-label">Left</label>
                                                                <div class="col-sm-10">
                                                                    <div class="input-group">
                                                                        <span class="input-group-btn">
                                                                            <select  name="left_visualizer_type" class="form-control" style="width:100px;">
                                                                                <option>Jersey</option>
                                                                                <option>Shorts</option>
                                                                                <option>Shirts</option>
                                                                                <option>Hoodie</option>
                                                                            </select>
                                                                        </span>
                                                                        <input type="file" name="left_visualizer"  data-use-id="left_visualizer" class="form-control upload-visualizer">
                                                                        <span class="input-group-btn">
                                                                            <button data-visualizer="#" class="btn btn-primary left_visualizer_href btn-preview-visualizer" type="button">
                                                                                <i class="fa fa-eye" aria-hidden="true">
                                                                                </i> Preview
                                                                            </button>
                                                                        </span>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <div class="col-sm-6">
                                                            <div class="form-group">
                                                                <label  class="col-sm-4 control-label">Select Visualizer Format</label>
                                                                <div class="col-sm-8">
                                                                    <select class="form-control" name="visualizer_format">
                                                                        <option value="svg">SVG</option>
                                                                        <option value="png">PNG</option>
                                                                    </select>
                                                                </div>
                                                            </div>
                                                            <div class="form-group">
                                                                <label  class="col-sm-4 control-label">Set Default Body Color</label>
                                                                <div class="col-sm-6">
                                                                    <input type="text" class="form-control" name="main_body_label" value="Main Body" placeholder="Set Default Body Color">
                                                                </div>
                                                                <div class="col-sm-2">
                                                                    <input type="hidden" name="main_body_def_color" value="#e2e2e2" class="colorPicker form-control">
                                                                </div>
                                                            </div>
                                                            <div class="form-group">
                                                                <label  class="col-sm-4 control-label">Select Number of Trims</label>
                                                                <div class="col-sm-8">
                                                                    <select class="form-control" id="numberOfTrims" name="numberOfTrims">
                                                                        @for($i = 0; $i <= 10; $i++)
                                                                            <option> {{$i }}</option>
                                                                        @endfor
                                                                    </select>
                                                                </div>
                                                            </div>
                                                            <div id="list_of_trims">
                                                                
                                                            </div>
                                                        </div>
                                                        <br><br><br>
                                                        <div class="col-sm-12">
                                                            <ul class="list-inline pull-right" style="margin-top: 50px;">
                                                                <li><button type="button" class="btn btn-default prev-step"><i class="fa fa-long-arrow-left" aria-hidden="true"></i> Previous</button></li>
                                                                <li><button type="button" class="btn btn-primary next-step" id="stepTwoNextBtn">Next <i class="fa fa-long-arrow-right" aria-hidden="true"></i></button></li>
                                                            </ul>
                                                        </div>  
                                                    </div>
                                                    
                                                    <div class="tab-pane" role="tabpanel" id="complete">
                                                        <h3>Complete steps</h3>
                                                        <p>You have successfully completed every steps.</p>
                                                        <ul class="list-inline pull-right">
                                                            <li><button type="button" class="btn btn-default prev-step"><i class="fa fa-long-arrow-left" aria-hidden="true"></i> Previous</button></li>
                                                            <li><button type="submit" id="submitTemplateBtn" class="btn btn-primary btn-info-full next-step">Save new template</button></li>
                                                        </ul>
                                                    </div>
                                                    <!-- <div class="clearfix"></div> -->
                                                </div>
                                            </form>
                                        </div>
                                    </section>
                                </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- /.content -->
</div>

<div class="modal fade" id="modal_preview_visualizer" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <form id="frm_edit_category">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Preview</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <div id="modal_preview_visualizer_body">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection