@extends('admin.template.template_layout')

@section ('template_content')
<div id="page-wrapper" class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight no-padding">
        <div class="row white-bg">
            <div class="toobar-wrapper clearfix">
                <div class="navbar-header float-none">
                    <!--<div class="pull-left">
                        <a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#"><i class="fa fa-bars"></i> </a>
                    </div>-->
                    <ul class="custom-breadcrumb clearfix clear-list new-template pull-left" id="new_template">
                        <li><label class="custom-label">New Template : </label></li>
                        <li><a class="btn btn-default btn-xs" type="button" href="#" title="6 Legs"><img src="{{ url('public/template/img/6-leg.png') }}" height="16" width="16"/></a></li>
                        <li><a class="btn btn-default btn-xs" type="button" href="#"title="5 Legs"><img src="{{ url('public/template/img/5-leg.png') }}" height="16" width="16"/></a></li>
                        <li><a class="btn btn-default btn-xs" type="button" href="#"title="4 Legs"><img src="{{ url('public/template/img/4-leg.png') }}" height="16" width="16"/></a></li>
                        <li><a class="btn btn-default btn-xs" type="button" href="#"title="3 Legs"><img src="{{ url('public/template/img/3-leg.png') }}" height="16" width="16"/></a></li>
                        <li><a class="btn btn-default btn-xs" type="button" href="#" title="Signalized vs Roundabout" >Signalized vs Roundabout</a></li>
                    </ul>
                    <ul class="custom-breadcrumb clearfix clear-list section-toolbar pull-left" id="section_toolbar">
                        <li><label class="custom-label">Tools Section : </label></li>
                        <li><a class="btn btn-default btn-xs" type="button" href="#" title="Line"><img src="{{ url('public/template/img/line.png') }}" height="16" width="16"/></a></li>
                        <li><a class="btn btn-default btn-xs" type="button" href="#" title="Square"><img src="{{ url('public/template/img/full.png') }}"height="16" width="16"/></a></li>
                        <li><a class="btn btn-default btn-xs" type="button" href="#" title="Circle"><i class="fa fa-circle-thin" aria-hidden="true"></i></a></li>
                        <li><a class="btn btn-default btn-xs" type="button" href="#" title="Triangle"><img src="{{ url('public/template/img/triangle.png') }}" height="16" width="16"></a></li>
                        <li><a class="btn btn-default btn-xs" type="button" href="#" title="Square"><img src="{{ url('public/template/img/side-icon.png') }}" height="16" width="16"></a></li>
                        <li><a class="btn btn-default btn-xs" type="button" href="#" title="T Road"><img src="{{ url('public/template/img/t_road.png') }}" height="16" width="16"></a></li>
                    </ul>
                    <ul class="custom-breadcrumb clearfix clear-list utility-toolbar pull-left" id="utility_toolbar">
                        <li><label class="custom-label">Utility Toolbar : </label></li>
                        <li><a class="btn btn-default btn-xs" type="button" href="#" title="Zoom In"><i class="fa fa-search-plus" aria-hidden="true"></i></a></li>
                        <li><a class="btn btn-default btn-xs" type="button" href="#" title="Zoom Out"><i class="fa fa-search-minus" aria-hidden="true"></i></a></li>
                        <li><a class="btn btn-default btn-xs" type="button" href="#" title="No Zoom"><i class="fa fa-search" aria-hidden="true"></i></a></li>
                        <li><a class="btn btn-default btn-xs" type="button" href="#" title="Undo"><i class="fa fa-undo" aria-hidden="true"></i></a></li>
                        <li><a class="btn btn-default btn-xs" type="button" href="#" title="Redo"><i class="fa fa-repeat" aria-hidden="true"></i></a></li>
                    </ul>
                    <ul class="custom-breadcrumb clearfix clear-list text-toolbar pull-left" id="text_toolbar">
                        <li><label class="custom-label">Text Editing : </label></li>
                        <li><a class="btn btn-default btn-xs" type="button" href="#" title="Bold"><i class="fa fa-bold" aria-hidden="true"></i></a><a class="btn btn-default btn-xs" type="button" href="#" title="Italic"><i class="fa fa-italic" aria-hidden="true"></i></a><a class="btn btn-default btn-xs" type="button" href="#" title="Underline"><i class="fa fa-underline" aria-hidden="true"></i></a></li>
                        <li><a class="btn btn-default btn-xs" type="button" href="#" title="Small Size"><img src="{{ url('public/template/img/x_2.png') }}" height="16" width="16"></a><a class="btn btn-default btn-xs" type="button" href="#" title="Large Size"><img src="img/x-2.png" height="16" width="16"></a></li>
                        <li><a class="btn btn-default btn-xs" type="button" href="#" title="Aling Left"><i class="fa fa-align-left" aria-hidden="true"></i></a><a class="btn btn-default btn-xs" type="button" href="#" title="Aling Center"><i class="fa fa-align-center" aria-hidden="true"></i></a><a class="btn btn-default btn-xs" type="button" href="#" title="Aling Right"><i class="fa fa-align-right" aria-hidden="true"></i></a></li>
                        <li>
                            <label class="custom-label">Font Family</label>
                            <select title="Font Family">
                                <option>Arial</option>
                                <option>Open sans</option>
                                <option>16px</option>
                                <option>18px</option>
                            </select>
                        </li>
                        <li>
                            <label class="custom-label">Font Size</label>
                            <select title="Font Size">
                                <option>12px</option>
                                <option>14px</option>
                                <option>16px</option>
                                <option>18px</option>
                            </select>
                        </li>
                        <li>
                            <label class="custom-label">Font Color</label>
                            <a class="btn colorpicker-btn btn-xs" type="button" href="#" title="Font Color"></a>
                        </li>
                    </ul>
                    <ul class="custom-breadcrumb clearfix clear-list upload-toolbar pull-left" id="upload_toolbar">
                        <li><label class="custom-label">Image Section : </label></li>
                        <li>
                            <div class="btn-group">
                                <label class="btn btn-default btn-xs" for="inputImage" title="File Upload">
                                    <input id="inputImage" class="hide" type="file" name="file" accept="image/*">
                                    File Upload
                                </label>
                            </div>
                        </li>
                        <li><a class="btn btn-default btn-xs" type="button" data-toggle="modal" data-target="#myModal6" href="#" title="Set Arrow">Set Arrow</a></li>
                        <li><a class="btn btn-default btn-xs" type="button" href="#">Ok</a></li>
                    </ul>
                    <ul class="custom-breadcrumb clearfix clear-list template-toolbar pull-left" id="template_toolbar">
                        <li>
                            <label class="custom-label">Opacity</label>
                            <select title="Opacity">
                                <option>10%</option>
                                <option>30%</option>
                                <option>50%</option>
                                <option>100%</option>
                            </select>
                        </li>
                        <li>
                            <label class="custom-label">Background Color</label>
                            <a class="btn colorpicker-btn btn-xs" type="button" href="#" title="Background Color"></a>
                        </li>
                        <li>
                            <label class="custom-label">Line Type</label>
                            <select title="Line Type">
                                <option>Line Type 1</option>
                                <option>Line Type 2</option>
                                <option>Line Type 3</option>
                                <option>Line Type 4</option>
                            </select>
                        </li>
                        <li>
                            <label class="custom-label">Line Weight</label>
                            <select title="Line Weight">
                                <option>Line Weight 1</option>
                                <option>Line Weight 2</option>
                                <option>Line Weight 3</option>
                                <option>Line Weight 4</option>
                            </select>
                        </li>
                    </ul>
                    <div class="pull-right m-r" style="margin-top: 5px;">
                        <button class="btn btn-warning btn-xs" type="button" data-toggle="collapse" data-target="#temp_name">Template List</button>
                        <button class="btn btn-warning btn-xs" type="button" data-toggle="collapse" data-target="#batch_name">Batch List</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12 no-padding">
                <div class="editor-full">
                    <div class="graps-image">
                        <img src="{{ url('public/template/img/app-blank-bg.png') }}" id="image_one"/>
                        <img src="{{ url('public/template/img/app-blank-bg-2.png') }}" id="image_second"/>
                    </div>
                    <div class="graps-intersection-full">
                        <div class="custom-block-50">
                            <button type="button" class="block-custom-button-1" data-toggle="modal" data-target="#myModal7"></button>
                        </div>
                        <div class="custom-block-50">
                            <button type="button" class="block-custom-button-2" data-toggle="modal" data-target="#myModal7"></button>
                        </div>
                        <div class="custom-block-50">
                            <button type="button" class="block-custom-button-3" data-toggle="modal" data-target="#myModal7"></button>
                        </div>
                        <div class="custom-block-50">
                            <button type="button" class="block-custom-button-4" data-toggle="modal" data-target="#myModal7"></button>
                        </div>
                        <div class="intersection-middle-box" data-toggle="modal" data-target="#myModal8"></div>
                    </div>
                </div>
            </div>
            <div class="no-padding col-lg-3 col-sm-3 collapse" id="temp_name">
                <a href="#" class="list-group-item active">
                    <b>Template List</b>
                </a>
                <button class="close" id="temp_name_close" type="button" style="margin-right: 5px;" data-toggle="collapse" data-target="#temp_name">
                    <span aria-hidden="true">×</span>
                    <span class="sr-only">Close</span>
                </button>
                <div class="list-group template-list-section center-block">
                    <button class="btn btn-default btn-block text-left">Template#0001</button>
                    <button class="btn btn-default btn-block text-left">Template#0002</button>
                    <button class="btn btn-default btn-block text-left">Template#0003</button>
                    <button class="btn btn-default btn-block text-left">Template#0004</button>
                    <button class="btn btn-default btn-block text-left">Template#0005</button>
                    <button class="btn btn-default btn-block text-left">Template#0006</button>
                </div>
            </div>
            <div class="no-padding col-lg-3 col-sm-3 collapse" id="batch_name">
                <a href="#" class="list-group-item active">
                    <b>Batch List</b>
                </a>
                <button class="close" id="temp_name_close" type="button" style="margin-right: 5px;" data-toggle="collapse" data-target="#batch_name">
                    <span aria-hidden="true">×</span>
                    <span class="sr-only">Close</span>
                </button>
                <div class="list-group template-list-section center-block">
                    <button class="btn btn-default btn-block text-left">1. J St & S 9th</button>
                    <button class="btn btn-default btn-block text-left">2. Martin Luther King Jr Way & S 9th</button>
                    <button class="btn btn-default btn-block text-left">3. Sprague Ave & S 9th</button>
                    <button class="btn btn-default btn-block text-left">4. Yakima Ave & S 9th</button>
                    <button class="btn btn-default btn-block text-left">5. Yakima Ave & S 10th</button>
                    <button class="btn btn-default btn-block text-left">6. J St & S 11th</button>
                    <button class="btn btn-default btn-block text-left">7. M St & S 11th</button>
                    <button class="btn btn-default btn-block text-left">8. Martin Luther King Jr Way & S 11th</button>
                    <button class="btn btn-default btn-block text-left">9. Sprague Ave & S 11th</button>
                    <button class="btn btn-default btn-block text-left">10. Yakima Ave & S 11th</button>
                    <button class="btn btn-default btn-block text-left">11. Cedar St & S 12th</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal inmodal" id="myModal2" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content animated flipInY">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h6 class="modal-title text-left">Save Template</h6>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-lg-3">
                        <div class="thumbnail">
                            <img src="{{ url('public/template/img/template-image.png') }}" class="img-responsive center-block"/>
                            <h4 class="text-center">Template Name</h4>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="thumbnail">
                            <img src="{{ url('public/template/img/template-image.png') }}" class="img-responsive center-block"/>
                            <h4 class="text-center">Template Name</h4>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="thumbnail">
                            <img src="{{ url('public/template/img/template-image.png') }}" class="img-responsive center-block"/>
                            <h4 class="text-center">Template Name</h4>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="thumbnail">
                            <img src="{{ url('public/template/img/template-image.png') }}" class="img-responsive center-block"/>
                            <h4 class="text-center">Template Name</h4>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <div class="col-lg-12">
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">Template Name</label>
                            <div class="col-sm-8">
                                <input class="form-control" type="text" placeholder="Template Name">
                            </div>
                            <div class="col-sm-2">
                                <button type="button" class="btn btn-primary" data-dismiss="modal">Save</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal inmodal" id="myModal3" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content animated flipInY">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h6 class="modal-title text-left">Save As New Template</h6>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-lg-3">
                        <div class="thumbnail">
                            <img src="{{ url('public/template/img/template-image.png') }}" class="img-responsive center-block"/>
                            <h4 class="text-center">Template Name</h4>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="thumbnail">
                            <img src="{{ url('public/template/img/template-image.png') }}" class="img-responsive center-block"/>
                            <h4 class="text-center">Template Name</h4>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="thumbnail">
                            <img src="{{ url('public/template/img/template-image.png') }}" class="img-responsive center-block"/>
                            <h4 class="text-center">Template Name</h4>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="thumbnail">
                            <img src="{{ url('public/template/img/template-image.png') }}" class="img-responsive center-block"/>
                            <h4 class="text-center">Template Name</h4>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <div class="col-lg-12">
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label class="col-sm-4 control-label">Template Name</label>
                            <div class="col-sm-6">
                                <input class="form-control" type="text" placeholder="Template Name">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">Save As New Template</label>
                            <div class="col-sm-6">
                                <select class="form-control">
                                    <option>Save As New Template</option>

                                </select>
                            </div>
                            <div class="col-sm-2">
                                <button type="button" class="btn btn-primary" data-dismiss="modal">Save</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal inmodal" id="myModal5" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content animated flipInY">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h6 class="modal-title text-left">Set Template Theme</h6>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-lg-3">
                        <div class="thumbnail">
                            <img src="{{ url('public/template/img/template-image.png') }}" class="img-responsive center-block"/>
                            <h4 class="text-center">Template Name</h4>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="thumbnail">
                            <img src="{{ url('public/template/img/template-image.png') }}" class="img-responsive center-block"/>
                            <h4 class="text-center">Template Name</h4>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="thumbnail">
                            <img src="{{ url('public/template/img/template-image.png') }}" class="img-responsive center-block"/>
                            <h4 class="text-center">Template Name</h4>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="thumbnail">
                            <img src="{{ url('public/template/img/template-image.png') }}" class="img-responsive center-block"/>
                            <h4 class="text-center">Template Name</h4>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <div class="col-lg-12">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">Save</button>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal inmodal" id="myModal6" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-md">
        <div class="modal-content animated flipInY">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h6 class="modal-title text-left">Custom Arrow set</h6>
            </div>
            <div class="modal-body">
                <div class="row border-bottom m-b">
                    <div class="col-lg-3"><strong>Arrow Set 01</strong></div>
                    <div class="col-lg-6 text-center"><button class="btn btn-primary btn-xs" type="button">View</button></div>
                    <div class="col-lg-3 i-checks pull-right"><label><input type="checkbox" value="" checked=""> <i>Active</label></div>
                </div>
                <div class="row">
                    <div class="col-lg-12">
                        <div class="thumbnail">
                            <img src="{{ url('public/template/img/arrow-set.jpg') }}" class="img-responsive"/>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-body m-t-md">
                <div class="row border-bottom m-b">
                    <div class="col-lg-3"><strong>Arrow Set 02</strong></div>
                    <div class="col-lg-6 text-center"><button class="btn btn-primary btn-xs" type="button">View</button></div>
                    <div class="col-lg-3 i-checks pull-right"><label><input type="checkbox" value=""> <i>Not Active</label></div>
                </div>
                <div class="row">
                    <div class="col-lg-12">
                        <div class="thumbnail">
                            <img src="{{ url('public/template/img/arrow-set.jpg') }}" class="img-responsive"/>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <div class="col-lg-12">
                    <div class="btn-group">
                        <label class="btn btn-primary" for="inputImage" title="File Upload">
                            <input id="inputImage" class="hide" type="file" name="file" accept="image/*">
                            File Upload
                        </label>
                    </div>
                    <button type="button" class="btn btn-primary" data-dismiss="modal">Save</button>
                </div>
            </div>
        </div>
    </div>
</div>
<!------------Button Modal-------------------->
<div class="modal inmodal" id="myModal7" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content animated flipInY">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h6 class="modal-title text-left">Perameter</h6>
            </div>
            <div class="modal-body">
                <div class="btn-group m-l-md">
                    <button type="button" class="btn btn-primary" data-target="#myModal9" data-toggle="modal" data-dismiss="modal">Movement</button>
                    <button type="button" class="btn btn-primary" data-target="#myModal9" data-toggle="modal" data-dismiss="modal">Approach</button>
                </div>
            </div>
            <div class="modal-footer">
                <div class="col-lg-12">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal inmodal" id="myModal8" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content animated flipInY">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h6 class="modal-title text-left">Intersection</h6>
            </div>
            <div class="modal-body">
                <div class="btn-group" data-toggle="buttons-checkbox">
                    <button type="button" class="btn btn-primary">Total Volumes</button>
                    <button type="button" class="btn btn-primary">Heavy Vehicles</button>
                    <button type="button" class="btn btn-primary">Volume Capacity (V/C) Ratio</button>
                    <button type="button" class="btn btn-primary">Delay</button>
                    <button type="button" class="btn btn-primary">Level of Service(LOS)</button>
                </div>
            </div>
            <div class="modal-footer">
                <div class="col-lg-12">
                    <button type="button" class="btn btn-primary save" data-dismiss="modal" id="">Save</button>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal inmodal" id="myModal9" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content animated flipInY">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h6 class="modal-title text-left">Perameter</h6>
            </div>
            <div class="modal-body">
                <div class="btn-group" data-toggle="buttons-checkbox">
                    <button type="button" class="btn btn-primary">Total Volumes</button>
                    <button type="button" class="btn btn-primary">Heavy Vehicles</button>
                    <button type="button" class="btn btn-primary">Volume Capacity (V/C) Ratio</button>
                    <button type="button" class="btn btn-primary">Delay</button>
                    <button type="button" class="btn btn-primary">Level of Service(LOS)</button>
                </div>
            </div>
            <div class="modal-footer">
                <div class="col-lg-12">
                    <button type="button" class="btn btn-primary save"  data-dismiss="modal" id="">Save</button>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection