@extends('layouts.app')
@section('styles')
    @parent
    <link rel="stylesheet" type="text/css" href="{{asset('public/css/daterangepicker.css')}}"/>
@endsection
@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>
    <script type="text/javascript" src="{{asset('public/js/main.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" class="active">
                                <a href="#">Tattoo calculator</a>
                            </li>
                        </ul>
                        <div class="col-md-12">
                            <div id="styles"></div>
                        </div>
                        <form class="tab-content index" action="{{asset('calculate/order')}}" method="post">
                            {!! csrf_field() !!}
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="exampleInputEmail1">Category of style</label>
                                    <select class="form-control" name="catalogs_id" id="style">
                                        <option value="0" data-src="1502341206-realism.jpg">Choose category</option>
                                        @foreach($cats as $one)
                                                                                        <option value="{{$one->id}}"
                                                    {{($id==$one->id)?'selected':''}}  data-src="{{$one->picture}}">{{$one->name}}</option>
                                        @endforeach
                                    </select>

                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="exampleInputEmail1">width, cm</label>
                                    <select class="form-control" id="width" name="width">
                                        @for($i=1; $i<51; $i++)
                                                                                        <option id="w{{$i}}"
                                                    value="{{$a}}" {{($a==(int)$width_c) ? 'selected' : ''}}>{{$a}}</option>
                                        @endfor
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="exampleInputEmail1">height, cm </label>
                                    <select class="form-control" id="height" name="height">
                                        @for($i=1; $i<71; $i++)
                                                                                        <option id="h{{$i}}"
                                                    value="{{$a}}" {{($a==(int)$height_c) ? 'selected' : ''}}>{{$a}}</option>
                                        @endfor
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <p align="center">
                                    <img src="{{($picture->picture)?$picture->picture:''}}"  id="pic"/>
                                </p>
                            </div>

                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="exampleInputEmail1">Artist</label>
                                    <div id="artist_hide"></div>
                                    <select class="form-control" name="artist_id" id="artist_select">
                                        <option value="0">Any Artist</option>
                                        @foreach($artists as $one)
                                                                                        <option data-saloon="{{$one->saloon->name}}"
                                                    {{(isset($selected))?$selected:''}}
                                                    value="{{$one->id}}">{{$one->name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="exampleInputEmail1">Salon</label>
                                    <div id="saloon_hide"></div>
                                    <select class="form-control" name="saloon_id" id="saloon_select">
                                        <option value="0">Any Salon</option>
                                        @foreach($saloons as $one)
                                                                                        <option data-artists="{{$arts}}"
                                                    {{(isset($selected))?$selected:''}}
                                                    value="{{$one->id}}">{{$one->name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <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-12">
                                <div class="int">Width: <b id="width_out">{{(int)$width_c}}</b> cm <br/>
                                    Height: <b id="height_out">{{(int)$height_c}}</b> cm <br/>
                                    Size: <b id="size_out">{{(int)$size}}</b> cm<sup>2</sup> <br/>
                                    <p align="center">
                                    </p>
                                </div>
                            </div>
                            <div class="mam_name">
                                Total sum:
                                -                                &euro;
                            </div>
                            <div class="col-md-12 sends">
                                <input type="submit" name="send" value="Order"
                                       class="btn btn-block btn-danger">
                            </div>

                            <div class="col-md-4">
                                <a href="{{asset('tattooprint')}}" target="_blank" class="btn btn-primary btn-block">Print
                                </a>
                            </div>
                            <div class="col-md-4">
                                <a href="{{asset('/')}}" class="btn btn-primary btn-block">Change</a>
                            </div>
                            <div class="col-md-4">
                                <a href="{{asset('/cookieclear')}} btn-block"
                                   class="btn btn-primary btn-block">Clear</a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection