499 lines
31 KiB
PHP
499 lines
31 KiB
PHP
@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">Visualizer Code</label>
|
|
<div class="col-sm-8">
|
|
<input type="text" class="form-control" name="templateCode" id="templateCode" readonly="true" />
|
|
</div>
|
|
</div> --}}
|
|
<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">Visualizer Type</label>
|
|
<div class="col-sm-8">
|
|
<select class="form-control" id="templateType" name="templateType">
|
|
</select>
|
|
</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">×</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 |