Files
merchbay_admin/resources/views/admin_pages/edit_visualizer.blade.php
2021-07-10 10:15:55 +00:00

582 lines
42 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>
Editing 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"> Edit 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">
{{-- {{ var_dump() }} --}}
<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_edit_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>
<input type="hidden" value="{{ $template_array[0]->Id }}" name="visualizer_id" />
<div class="col-lg-8 col-sm-8">
<div class="form-group">
<label class="col-sm-4 control-label">&nbsp;</label>
<div class="col-sm-8">
<button type="button" class="btn btn-danger" data-id="{{ $template_array[0]->Id }}" id="btn_delete_visualizer">Delete This Visualizer</button>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">Is Active</label>
<div class="col-sm-8">
<select class="form-control" name="is_active">
<option value="TRUE" @if ($template_array[0]->IsActive == "TRUE") selected @endif>TRUE</option>
<option value="FALSE" @if ($template_array[0]->IsActive == "FALSE") selected @endif>FALSE</option>
</select>
</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 }}" @if($template_array[0]->SportsId == $sports->Id) selected @endif >{{ $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">
@foreach ($sports_category_array as $sports_category)
<option value="{{ $sports_category->Id }}" @if($template_array[0]->Category == $sports_category->Id) selected @endif >{{ $sports_category->Category }}</option>
@endforeach
</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" value="{{ $template_array[0]->TemplateName }}" 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)
@if(in_array($pattern->PatternId, $template_pattern_array)){
<option selected value="{{ $pattern->PatternId . '##' . $pattern->PatternThumbnail .'##' . $pattern->NoOFColor . '##' . $pattern->Opacity . '##' . $pattern->Gradient }}"> {{ $pattern->PatternName }}</option>
@else
<option value="{{ $pattern->PatternId . '##' . $pattern->PatternThumbnail .'##' . $pattern->NoOFColor . '##' . $pattern->Opacity . '##' . $pattern->Gradient }}"> {{ $pattern->PatternName }}</option>
@endif
@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" value="{{ $template_array[0]->Tags }}" 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" />
<input type="hidden" class="form-control upload_img" value="{{ $template_array[0]->Thumbnail }}" name="current_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">
@if($template_array[0]->Thumbnail != null)
<a href="{{ config('site_config.images_directory') . $template_array[0]->Thumbnail }}" class="img_store_logo_href" data-toggle="lightbox">
<img class="img_store_logo_img" id="img_store_logo" src="{{ config('site_config.images_directory') . $template_array[0]->Thumbnail }}" style="max-width: 100%; max-height: 100%; ">
</a>
@else
<a href="{{ config('site_config.images_directory') . 'templates/thumbnail/visualizer-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') . 'templates/thumbnail/visualizer-placeholder.jpg' }}" style="max-width: 100%; max-height: 100%; ">
</a>
@endif
</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_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-6">
<div class="form-group">
<label class="col-sm-2 control-label">Front</label>
<div class="col-sm-10">
<div class="input-group">
@foreach ($template_path_array as $front)
@if ($front->Side == "Front")
<span class="input-group-btn">
<select name="front_visualizer_type" class="form-control" style="width:100px;">
<option @if ($front->Type == "Jersey") selected @endif>Jersey</option>
<option @if ($front->Type == "Shorts") selected @endif>Shorts</option>
<option @if ($front->Type == "Shirts") selected @endif>Shirts</option>
<option @if ($front->Type == "Hoodie") selected @endif>Hoodie</option>
</select>
</span>
<input type="file" name="front_visualizer" data-use-id="front_visualizer" class="form-control upload-visualizer">
<input type="hidden" value="{{ $front->Path }}" name="current_front_visualizer" class="form-control">
<input type="hidden" value="{{ $front->Id }}" name="front_visualizer_id" class="form-control">
<span class="input-group-btn">
<button data-for="edit" class="btn btn-primary front_visualizer_href btn-preview-visualizer" type="button" data-visualizer="{{ config('site_config.images_directory') . $front->Path }}">
<i class="fa fa-eye" aria-hidden="true">
</i> Preview
</button>
</span>
@endif
@endforeach
</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">
@foreach ($template_path_array as $back)
@if ($back->Side == "Back")
<span class="input-group-btn">
<select name="back_visualizer_type" class="form-control" style="width:100px;">
<option @if ($back->Type == "Jersey") selected @endif>Jersey</option>
<option @if ($back->Type == "Shorts") selected @endif>Shorts</option>
<option @if ($back->Type == "Shirts") selected @endif>Shirts</option>
<option @if ($back->Type == "Hoodie") selected @endif>Hoodie</option>
</select>
</span>
<input type="file" name="back_visualizer" data-use-id="back_visualizer" class="form-control upload-visualizer">
<input type="hidden" name="current_back_visualizer" data-use-id="back_visualizer" value="{{ $back->Path }}" class="form-control">
<input type="hidden" name="back_visualizer_id" data-use-id="back_visualizer" value="{{ $back->Id }}" class="form-control">
<span class="input-group-btn">
<button data-for="edit" class="btn btn-primary back_visualizer_href btn-preview-visualizer" type="button" data-visualizer="{{ config('site_config.images_directory') . $back->Path }}">
<i class="fa fa-eye" aria-hidden="true">
</i> Preview
</button>
</span>
@endif
@endforeach
</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">
@foreach ($template_path_array as $right)
@if ($right->Side == "Right")
<span class="input-group-btn">
<select name="right_visualizer_type" class="form-control" style="width:100px;">
<option @if ($right->Type == "Jersey") selected @endif>Jersey</option>
<option @if ($right->Type == "Shorts") selected @endif>Shorts</option>
<option @if ($right->Type == "Shirts") selected @endif>Shirts</option>
<option @if ($right->Type == "Hoodie") selected @endif>Hoodie</option>
</select>
</span>
<input type="file" name="right_visualizer" data-use-id="right_visualizer" class="form-control upload-visualizer">
<input type="hidden" value="{{ $right->Path }}" name="current_right_visualizer" class="form-control">
<input type="hidden" value="{{ $right->Id }}" name="right_visualizer_id" class="form-control">
<span class="input-group-btn">
<button data-for="edit" class="btn btn-primary right_visualizer_href btn-preview-visualizer" type="button" data-visualizer="{{ config('site_config.images_directory') . $right->Path }}">
<i class="fa fa-eye" aria-hidden="true">
</i> Preview
</button>
</span>
@endif
@endforeach
</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">
@foreach ($template_path_array as $left)
@if ($left->Side == "Left")
<span class="input-group-btn">
<select name="left_visualizer_type" class="form-control" style="width:100px;">
<option @if ($left->Type == "Jersey") selected @endif>Jersey</option>
<option @if ($left->Type == "Shorts") selected @endif>Shorts</option>
<option @if ($left->Type == "Shirts") selected @endif>Shirts</option>
<option @if ($left->Type == "Hoodie") selected @endif>Hoodie</option>
</select>
</span>
<input type="file" name="left_visualizer" data-use-id="left_visualizer" class="form-control upload-visualizer">
<input type="hidden" value="{{ $left->Path }}" name="current_left_visualizer" class="form-control upload-visualizer">
<input type="hidden" value="{{ $left->Id }}" name="left_visualizer_id" class="form-control">
<span class="input-group-btn">
<button data-for="edit" class="btn btn-primary left_visualizer_href btn-preview-visualizer" type="button" data-visualizer="{{ config('site_config.images_directory') . $left->Path }}">
<i class="fa fa-eye" aria-hidden="true">
</i> Preview
</button>
</span>
@endif
@endforeach
</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 @if($template_array[0]->TemplateFormat == "svg") selected @endif value="svg" >SVG</option>
<option @if($template_array[0]->TemplateFormat == "png") selected @endif 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="{{ $default_body_color_array[0]->DisplayName }}" placeholder="Set Default Body Color">
</div>
<div class="col-sm-2">
<input type="hidden" name="main_body_def_color" value="{{ $default_body_color_array[0]->RGBColor }}" 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++)
@if ($template_array[0]->Trim == $i)
<option selected>{{ $i }}</option>
@else
<option>{{ $i }}</option>
@endif
@endfor
</select>
</div>
</div>
<div id="list_of_trims">
{{-- {{ var_dump($default_trim_color_array) }} --}}
@php ($a = 1)
@for ($i = 0; $i < $template_array[0]->Trim; $i++)
{{-- {{ $default_trim_color_array[$i]->RGBColor }} --}}
@if ($i == 0)
<div class="form-group">
<label class="col-sm-4 control-label">Set Default Trim Color</label>
<div class="col-sm-6">
<input type="text" name="trim_label[]" class="form-control" value="{{ $default_trim_color_array[$i]->DisplayName }}" placeholder="{{ "Trim " . $a }}">
</div>
<div class="col-sm-2">
<input type="hidden" name="trim_def_color[]" class="colorPicker-trim" value="{{ $default_trim_color_array[$i]->RGBColor }}">
</div>
</div>
@else
<div class="form-group">
<label class="col-sm-4 control-label">&nbsp;</label>
<div class="col-sm-6">
<input type="text" name="trim_label[]" class="form-control" value="{{ $default_trim_color_array[$i]->DisplayName }}" placeholder="{{ "Trim " . $a }}">
</div>
<div class="col-sm-2">
<input type="hidden" name="trim_def_color[]" class="colorPicker-trim" value="{{ $default_trim_color_array[$i]->RGBColor }}">
</div>
</div>
@endif
@php ($a++)
@endfor
{{-- @foreach ($default_trim_color_array as $trim_color)
@if ($i == 1)
{{ "if " . $i}}
@else
{{ "else " . $i}}
@endif
$i++;
@endforeach --}}
</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="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