@extends('main_layouts.admin_template')
@section('content')
    <div class="content-wrapper" style="min-height: 916px;">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                Adding of Template
            </h1>
            <ol class="breadcrumb">
                <li><a href="{{ url('/admin') }}"><i class="fa fa-dashboard"></i> Home</a></li>
                <li class="active">Adding of Template</li>
            </ol>
        </section>

        <!-- Main content -->
        <section class="content">
            <div class="box box-custom-color" style="min-height:450px;">
                <div class="box-body">
                    <div class="row">
                        
                         <div class="col-lg-12 col-sm-12">
                            <div id="saveTemplateMsg"></div>
                            <section>
                                <div class="wizard">
                                   
                                <!--     <h3>Template Information</h3>
                                    <hr>
                                  -->
                                    <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" id="frmTemplate">
                                        <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-sm-6">
                                                    <div class="form-group">
                                                        <label>Template Code</label>
                                                        <input type="text" class="form-control" name="templateCode" id="templateCode" readonly="true" data-error="#err-templateCode" />
                                                           <!--  <smal>(Auto generated)</smal> -->
                                                        <span id="err-templateCode" style="color: #dd4b39"></span>
                                                    </div>
                                                    <div class="form-group">
                                                        <label>Select Sports</label>
                                                        <select class="form-control" id="sportName" name="sportName" data-error="#err-sportName">
                                                        </select>
                                                        <span id="err-sportName" style="color: #dd4b39"></span>
                                                    </div>
                                                    <div class="form-group">
                                                        <label>Template Name</label>
                                                        <input type="text" class="form-control" name="templateName" placeholder="Template Name" data-error="#err-templateName" />
                                                        <span id="err-templateName" style="color: #dd4b39"></span>
                                                    </div>
                                                    <div class="form-group">
                                                        <label>Template Type</label>
                                                        <select class="form-control" id="templateType" name="templateType" data-error="#err-templateType">
                                                        </select>
                                                        <span id="err-templateType" style="color: #dd4b39"></span>
                                                    </div>
                                                    <div class="form-group">
                                                        <label>Number of Trims</label>
                                                        <input type="number" class="form-control" name="numberOfTrims" placeholder="Number of Trims" data-error="#err-numberOfTrims" />
                                                        <span id="err-numberOfTrims" style="color: #dd4b39"></span>
                                                    </div>
                                                    <div class="form-group">
                                                        <label>Add Skin(s)</label>
                                                        <select class="form-control" id="_addPatterns" name="addPattens" multiple="multiple" data-placeholder="Select a Skin(s)" data-error="#err-addPatterns">
                                                        </select>
                                                        <span id="err-addPatterns" style="color: #dd4b39"></span>
                                                        <input type="hidden" name="getSkins" id="getSkins" />
                                                        <!-- <button type="button" onclick="getskinvalue();">get value</button> -->
                                                    </div>
                                                </div>
                                                <div class="col-sm-6">
                                                    <div class="form-group">
                                                        <div class="col-sm-12">
                                                            <label  class="control-label" >Add Image <small id="label-suggest-upload">(400px x 600px)</small></label>
                                                            <br><br>
                                                            <img id="template-img-preview" src="{{url('public/images/no-image.jpg')}}" class="img img-responsive" alt="Preview Image" />
                                                            <br>
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <br><br>
                                                        <div class="col-sm-8">
                                                            <input name="tempateImage" id="tempateImage" class="form-control" type="file" onchange="templateThumbnailPreview(this);" data-error="#err-tempateImage" />
                                                            <span id="err-tempateImage" style="color: #dd4b39"></span>
                                                        </div>
                                                        <div class="col-sm-4">
                                                            <button type="button" onclick="clearTemplateImg();" class="btn btn-default btn-block">Clear</button>
                                                        </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-3">
                                                    <div class="panel panel-default">
                                                        <div class="panel-heading text-center"><h3>Jersey - Front</h3></div>
                                                        <div class="custom-panel-body panel-body">
                                                            <div class="obj-container">
                                                                <object id="_jerseyFront"  type="image/svg+xml" height="254px" width="100%">
                                                                    Your browser is not supported svg file
                                                                </object>
                                                            </div>
                                                        </div>
                                                        <div class="custom-panel-footer panel-footer">
                                                             <input type="file" data-error="#err-jerseyFront" data-id="_jerseyFront" onchange="loadSVG(this);" class="form-control" name="svgJerseyFront" style="margin-bottom: 2px;"/>
                                                            <button type="button" class="btn btn-default btn-block"><i class="fa fa-times" aria-hidden="true"></i> Clear</button>

                                                        </div>
                                                        <span class="text-center" id="err-jerseyFront" style="color: #dd4b39"></span>
                                                    </div>
                                                   
                                                </div>
                                                <div class="col-sm-3">
                                                    <div class="panel panel-default">
                                                        <div class="panel-heading text-center"><h3>Jersey - Back</h3></div>
                                                        <div class="custom-panel-body panel-body">
                                                            <div class="obj-container">
                                                                <object id="_jerseyBack"  type="image/svg+xml" height="254px" width="100%">
                                                                    Your browser is not supported svg file
                                                                </object>
                                                            </div>
                                                        </div>
                                                        <div class="custom-panel-footer panel-footer">
                                                            <input type="file" data-error="#err-jerseyBack" data-id="_jerseyBack" onchange="loadSVG(this);" class="form-control" name="svgJerseyBack" style="margin-bottom: 2px;"/>
                                                            <button type="button" class="btn btn-default btn-block"><i class="fa fa-times" aria-hidden="true"></i> Clear</button>
                                                        </div>
                                                        <span class="text-center" id="err-jerseyBack" style="color: #dd4b39"></span>
                                                    </div>
                                                </div>
                                                <div class="col-sm-3">
                                                    <div class="panel panel-default">
                                                        <div class="panel-heading text-center"><h3>Shorts - Right</h3></div>
                                                        <div class="custom-panel-body panel-body">
                                                            <div class="obj-container">
                                                                <object id="_shortsRight"  type="image/svg+xml" height="254px" width="100%">
                                                                    Your browser is not supported svg file
                                                                </object>
                                                            </div>
                                                        </div>
                                                        <div class="custom-panel-footer panel-footer">
                                                            <input type="file" data-error="#err-shortRight" data-id="_shortsRight" onchange="loadSVG(this);" class="form-control" name="svgShortRight" style="margin-bottom: 2px;"/>
                                                            <button type="button" class="btn btn-default btn-block"><i class="fa fa-times" aria-hidden="true"></i> Clear</button>
                                                        </div>
                                                        <span class="text-center" id="err-shortRight" style="color: #dd4b39"></span>
                                                    </div>
                                                </div>
                                                <div class="col-sm-3">
                                                    <div class="panel panel-default">
                                                        <div class="panel-heading text-center"><h3>Shorts - Left</h3></div>
                                                        <div class="custom-panel-body panel-body">
                                                            <div class="obj-container">
                                                                <object id="_shortsLeft" type="image/svg+xml" height="254px" width="100%">
                                                                    Your browser is not supported svg file
                                                                </object>
                                                            </div>
                                                        </div>
                                                        <div class="custom-panel-footer panel-footer">
                                                            <input type="file" data-error="#err-shortLeft" data-id="_shortsLeft" onchange="loadSVG(this);" class="form-control" name="svgShortLeft" style="margin-bottom: 2px;"/>
                                                            <button type="button" class="btn btn-default btn-block"><i class="fa fa-times" aria-hidden="true"></i> Clear</button>
                                                        </div>
                                                        <span class="text-center" id="err-shortLeft" style="color: #dd4b39"></span>
                                                    </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="button" 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>
        </section>
    </div>
@endsection