@extends('main_layouts.admin_template')
@section('content')
    <div class="content-wrapper" style="min-height: 916px;">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                Edit of Template
            </h1>
            <ol class="breadcrumb">
                <li><a href="{{ url('/admin') }}"><i class="fa fa-dashboard"></i> Home</a></li>
                <li class="active">Edit of Template</li>
            </ol>
        </section>
       <!--  return view('sub_pages.edit_template')->with('templatedata', $templateData)->with('templatepath', $templatePathsData)->with('sportsname', $sportsList)->with('templatetype', $templateTypes);
 -->
        <!-- Main content -->
        <section class="content">
            <!-- Custom Tabs -->
            
                <div class="nav-tabs-custom">
                    <ul class="nav nav-tabs nav-justified">
                        <li class="active">
                            <a href="#tab_1" data-toggle="tab" aria-expanded="true">Template Information</a>
                        </li>
                        <li class="">
                            <a href="#tab_2" data-toggle="tab" aria-expanded="false">Print Template Size(s)</a>
                        </li>
                    </ul>
                    <div class="tab-content" style="min-height:450px;">
                        <div class="tab-pane active" id="tab_1">

                            <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="presentartion" 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="frmEditTemplate">
                                        <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" readonly="true" data-error="#err-templateCode" value="{{ $templatedata[0]->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" name="sportName" data-error="#err-sportName">
                                                            <option value="" >--Select Sports--</option>
                                                            @foreach($sportsname as $row){
                                                                <option value="
                                                                    {{ $row->Id }}"
                                                                    {{old('sportName', $row->Id)== $templatedata[0]->SportsId ? 'selected':''}}
                                                                    >
                                                                    {{ $row->SportsName }}
                                                                </option>
                                                            }
                                                            @endforeach
                                                        </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" value="{{ $templatedata[0]->TemplateName }}" />
                                                        <span id="err-templateName" style="color: #dd4b39"></span>
                                                    </div>
                                                    <div class="form-group">
                                                        <label>Template Type</label>
                                                        <select class="form-control" name="templateType" data-error="#err-templateType">
                                                                <option value="" >--Select Type--</option>
                                                            @foreach($templatetype as $row){
                                                                <option value="
                                                                    {{ $row->TemplateType }}" 
                                                                    {{old( 'templateType', $row->TemplateType) == $templatedata[0]->TemplateType ? 'selected':''}}>
                                                                    {{ $row->TemplateType }}
                                                                </option>
                                                            }
                                                            @endforeach
                                                        </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" value="{{ $templatedata[0]->Trim }}" />
                                                        <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="skinsEdit" value="{{ $templatedata[0]->PatternId }}" />
                                                        <!-- <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') . '/' . $templatedata[0]->Thumbnail }}" 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_Edit" 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" data="{{url('public/images') . '/' . $templatepath[0]->Path }}" 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;"/>
                                                             <input type="hidden" class="form-control" name="id_svgJerseyFront" value="{{ $templatepath[0]->Id }}"/>
                                                            <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" data="{{url('public/images') . '/' . $templatepath[1]->Path }}" 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;"/>
                                                            <input type="hidden" class="form-control" name="id_svgJerseyBack" value="{{ $templatepath[1]->Id }}"/>
                                                            <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" data="{{url('public/images') . '/' . $templatepath[2]->Path }}" 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;"/>
                                                             <input type="hidden" class="form-control" name="id_svgShortRight" value="{{ $templatepath[2]->Id }}"/>
                                                            <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" data="{{url('public/images') . '/' . $templatepath[3]->Path }}" 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;"/>
                                                            <input type="hidden" class="form-control" name="id_svgShortLeft" value="{{ $templatepath[3]->Id }}"/>
                                                            <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_Edit">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_Edit" class="btn btn-primary btn-info-full next-step">Save changes</button></li>
                                                </ul>
                                            </div>
                                            <!-- <div class="clearfix"></div> -->
                                        </div>
                                    </form>
                                </div>
                            </section>
                            <div class="clearfix"></div>
                        </div>
                        <!-- /.tab-pane -->
                        <div class="tab-pane" id="tab_2">
                            <div class="col-md-5">
                                 <h3>List of Print Template</h3>
                            </div>
                            <div class="col-md-7">
                                <a href="{{ url('/admin/templates/edit' . '/' . $templatedata[0]->TemplateCode . '/' . 'p-add') }}" class="btn btn-default pull-right"><i class="fa fa-plus"></i> Add Print Template</a>
                            </div>
                            <div class="clearfix"></div>
                            <br>
                            
                            <div class="nav-tabs-custom">
                                <ul class="nav nav-tabs nav-justified">
                                    <li class="active">
                                        <a href="#tab_jersey" data-toggle="tab" aria-expanded="true">JERSEY</a>
                                    </li>
                                    <li class="">
                                        <a href="#tab_shorts" data-toggle="tab" aria-expanded="false">SHORTS</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="tab-content" style="min-height:450px;">
                                <div class="tab-pane active" id="tab_jersey">
                                    <div class="list-group">

                                        @if(count($printpattern) > 0)

                                            @foreach($printpattern as $row)
                                                @if($row->Type == 'JERSEY')
                                                <div class="list-group-item" style="min-height: 210px;">
                                                    <div class="media col-md-3">
                                                        <img class="media-object img-rounded img-responsive img-print-preview"   src="{{ url('public/images') . '/' . $row->Path }}" alt="placehold.it/350x250" >
                                                    </div>
                                                    <div class="col-md-6">
                                                        <h4 class="list-group-item-heading"> {{ $row->Type . " - " . $row->Size }}</h4>
                                                        <small style="color:#909090;"><b>Date Created: </b> {{ date("F j, Y g:i a", strtotime($row->DateCreated)) }}</small>
                                                    </div>
                                                    <div class="col-md-3 text-center">
                                                        <!-- <h2> 14240 <small> votes </small></h2> -->
                                                        <button type="button" class="btn btn-default btn-lg btn-block"><span class="glyphicon glyphicon-edit"></span> Edit</button>
                                                    </div>
                                                </div>
                                                @endif
                                            @endforeach

                                        @else
                                            <hr>
                                            <h3 class="text-center no-record" >No Print Template available</h3>
                                        @endif

                                    </div>
                                    <div class="clearfix"></div>
                                </div>
                                <div class="tab-pane" id="tab_shorts">
                                    <div class="list-group">
                                        @if(count($printpattern) > 0)

                                            @foreach($printpattern as $row)
                                                @if($row->Type == 'SHORTS')
                                                <div class="list-group-item" style="min-height: 210px;">
                                                    <div class="media col-md-3">
                                                        <img class="media-object img-rounded img-responsive img-print-preview"   src="{{ url('public/images') . '/' . $row->Path }}" alt="placehold.it/350x250" >
                                                    </div>
                                                    <div class="col-md-6">
                                                        <h4 class="list-group-item-heading"> {{ $row->Type . " - " . $row->Size }}</h4>
                                                        <small style="color:#909090;"><b>Date Created: </b> {{ date("F j, Y g:i a", strtotime($row->DateCreated)) }}</small>
                                                    </div>
                                                    <div class="col-md-3 text-center">
                                                        <!-- <h2> 14240 <small> votes </small></h2> -->
                                                        <button type="button" class="btn btn-default btn-lg btn-block"><span class="glyphicon glyphicon-edit"></span> Edit</button>
                                                    </div>
                                                </div>
                                                @endif
                                            @endforeach

                                        @else
                                            <hr>
                                            <h3 class="text-center no-record" >No Print Template available</h3>
                                        @endif

                                    </div>
                                    <div class="clearfix"></div>
                                </div>
                            </div>
                        </div>
                        <!-- /.tab-pane -->
                    </div>
                    <!-- /.tab-content -->
                </div>
        </section>
    </div>
@endsection