@extends('layouts.app')
@section('scripts')
    @parent
    <script type="text/javascript" src="{{asset('public/js/moment.min.js')}}"></script>

    <!-- Include Date Range Picker -->
    <script type="text/javascript" src="{{asset('public/js/daterangepicker.js')}}"></script>
    <link rel="stylesheet" type="text/css" href="{{asset('combodate.css')}}"/>
    <script type="text/javascript">
        $(function () {
            $('#dem').daterangepicker({
                        singleDatePicker: true,
                        showDropdowns: true
                    },
                    function (start, end, label) {
                        var years = moment().diff(start, 'years');
                        alert("You are " + years + " years old.");
                    });
        });
    </script>
    <script src="{{asset('public/js/calculator.js')}}"></script>
@endsection
@section('content')
    <div class="container">
        <div class="row">
            <div class="col-md-12 bodycon">
                <div class="panel-body main_body">
                    <div class="main_page">
                        <ul role="tablist" class="nav nav-tabs">
                            <li role="presentation">
                                <a href="/">Tattoo calculator</a>
                            </li>
                            <li role="presentation">
                                <a href="{{asset('/price')}}">Price</a>
                            </li>
                            <li role="presentation" class="active">
                                <a href="#">Order</a>
                            </li>
                        </ul>
                        <form enctype="multipart/form-data" action="{{asset('order')}}" method="post" class="myform">
                            {!! csrf_field() !!}
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="exampleInputEmail1">Style</label>
                                    <select class="form-control" name="catalogs_id" id="style">
                                        @foreach($cats as $one)
                                            <option value="{{$one->id}}" data-src="{{$one->picture}}">{{$one->name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <table width="100%" class="my_table">
                                    <tr>
                                        <td>
                                            <div class="form-group">
                                                <label for="exampleInputEmail1">width</label>
                                                <select class="form-control" id="width" name="width">
                                                    @for($i=1; $i<72; $i++)
                                                        <option value="{{$i}}" {{($i==30) ? 'selected' : ''}}>{{$i}}</option>
                                                    @endfor
                                                </select>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="form-group">
                                                <label for="exampleInputEmail1">height</label>
                                                <select class="form-control" id="height" name="height">
                                                    @for($i=1; $i<72; $i++)
                                                        <option value="{{$i}}" {{($i==25) ? 'selected' : ''}}>{{$i}}</option>
                                                    @endfor
                                                </select>
                                            </div>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <div class="real_size">
                                        <span id="size_order">10</span> <span class="">cm<sup>2</sup></span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group" id="cell">
                                    <div class="range">
                                        <span class="min">0</span>
                                        <span class="min">50</span>
                                        <span class="min">100</span>
                                        <span class="min">...</span>
                                    </div>
                                    <div id=”editableElement” contentEditable>
                                        <img src="/public/uploads/1502341206-realism.jpg" id="pic"/>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="exampleInputFile">File input</label>
                                    <input type="file" id="exampleInputFile">
                                    <p class="help-block">Example block-level help text here.</p>
                                </div>
                            </div>
                            <!--
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="exampleInputEmail1">Date</label>
                                    <input type="text" name="putdate" class="form-control" value="" id="dem"/>
                                    <p class="help-block">toutes les dates</p>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="exampleInputEmail1">Artist</label>
                                        <select class="form-control" name="saloon_id">
										<option value="0">Any Artist</option>
                                            @foreach($artists as $one)
                                                <option value="{{$one->id}}">{{$one->name}}</option>
                                            @endforeach
                                        </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="exampleInputEmail1">Saloon</label>
                                    @if($sal == null)
                                        <select class="form-control" name="saloon_id">
                                            @foreach($saloons as $one)
                                                <option value="{{$one->id}}">{{$one->name}}</option>
                                            @endforeach
                                        </select>
                                    @else
                                        <div class="already">
                                            {{$sal->name}}, <em>{{$sal->address}}</em>
                                        </div>
                                    @endif
                                </div>
                            </div>
                            <div class="col-md-12">
                                @if (Auth::guest())
                                    <div class="for_guest">
									<div class="col-md-12">
									<p>For order, you need be registered</p>
									 <a href="{{asset('/login')}}" class="btn btn-success">Login with E-mail</a>
									 <a href="{{asset('/auth/facebook')}}"  class="btn btn-primary">Login with Facebook</a>
									</div>
									</div>
                                @else
                                    <div class="sum">
                                        <span id="price">10</span>
                                        $
                                    </div>
                                    <input type="submit" name="send" value="Order" class="btn btn-block btn-danger">
                                @endif
                            </div>
                            -->
                            <div class="col-md-12">
                                    <input type="submit" name="send" value="Price" class="btn btn-block btn-danger">
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection